Reactjs 无状态组件中的函数不工作

在我下面的代码中，它给出了一个错误：CreateParticipant.jsx:9未捕获引用错误：未定义handleInputChangeName

我不明白是什么问题。我已经定义了函数，然后它也给出了这样一个错误

有人能帮我找出这个问题吗

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;

import React，{useState，useffect}来自“React”；
从'react router dom'导入{Redirect}；
const CreateParticipant=（）=>{
const[name，setname]=useState（[]）
const[email，setemail]=useState（[]）
handleInputChange=（事件）=>{
如果（event.target.name==“name”）{
setname（event.target.value）
}
else if（event.target.name==“电子邮件”）{
setemail（event.target.value）
}
}
异步函数createPostRequest（事件）{
//console.log（'this.state'，this.state）；
const statepost={name，email}
等待获取（“/api/v1/participants”{
方法：“post”，
正文：JSON.stringify（statepost），
标题：{'Content-Type'：'application/json'}，
})。然后（（响应）=>{
警报（“已成功创建Post”）；
location.href='/'；
});
}
useffect（（）=>{
createPostRequest（）
}, []);
返回(
新职位
姓名：
电邮：
{/* 
创建于：
*/}
创造
);
}
导出默认CreateParticipant；

与类组件中的

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}

模块总是在禁止隐式全局变量的地方运行

您需要显式地声明变量（使用

const

（或

let

或

var

）

---

然后如何在return（）中使用它，但现在我得到了未捕获的类型错误：无法读取未定义的@jsav的属性'createPostRequest'，您需要从中删除该属性。，然后如何在return（）中使用它，就像使用任何变量一样。用它的名字！（没有

这个
，因为它不是对象的属性！）
const handleInputChangeName = (event) => {