Question

在我的以下代码中，它给出了错误：CreateParticipant.jsx：9未捕获的ReferenceError：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;

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

模块始终在禁止隐式全局变量的strict mode中运行。

您需要明确声明变量（使用const（或let或var）。

const handleInputChangeName = (event) => {

无状态组件中的功能不起作用

2 个答案: