无状态组件中的函数不起作用

Question

在我的下面的代码中，它给出了一个错误：CreateParticipant.jsx：9 未捕获的引用错误：未定义句柄输入更改名称

我不明白问题出在哪里。我已经定义了函数，那么它也给出了这样的错误。

有人可以帮我找出问题吗？

import React, { useState, useEffect } from 'react';
import { Redirect } from 'react-router-dom';
const CreateParticipant = () => {
const [name, setname] = useState([])
const [email, setemail] = useState([])
handleInputChange = (event) => {
if(event.target.name === "name"){
setname(event.target.value)
}
else if(event.target.name === "email"){
setemail(event.target.value)
}
}
async function createPostRequest(event) {
// console.log('this.state', this.state);
const statepost = { name, email }
await fetch('/api/v1/participants', {
method: 'post',
body: JSON.stringify(statepost),
headers: { 'Content-Type': 'application/json' },
}).then((response) => {
alert('Post created successfully');
location.href = '/';
});
}
useEffect(() => {
createPostRequest()
}, []);
return (
<div>
<h3>New Post</h3>
<div>
<label>name: </label>
<input
type='text'
name='name'
value={name}
onChange={this.handleInputChange}
/>
</div>
<div>
<label>email: </label>
<input
type='text'
name='email'
value={email}
onChange={this.handleInputChange}
/>
</div>
{/* <div>
<label>created_at: </label>
<input
type='text'
name='created_at'
value={created_at}
onChange={this.handleInputChange}
/>
</div> */}
<button onClick={this.createPostRequest}>Create</button>
</div>
);
}
export default CreateParticipant;

Answer 1

与functionName = () => {}有效的类组件不同，函数组件只是一个函数。您需要var、let或const：

const handleInputChangeName = (event) => {
if(event.target.name === "name"){
setname(event.target.value)
}
else if(event.target.name === "email"){
setemail(event.target.value)
}
}

此外，不需要this.，因为这些函数在同一函数的范围内，例如：

onChange={handleInputChange}
// ...
onClick={createPostRequest}

Answer 2

模块始终在严格模式下运行，其中隐式全局是

禁止的。您需要显式声明变量(使用const(或let或var((。

const handleInputChangeName = (event) => {