Функция в компоненте без сохранения состояния не работает - PullRequest
Новая
       1

Функция в компоненте без сохранения состояния не работает

0 голосов
/ 28 мая 2020

В приведенном ниже коде выдается ошибка: CreateParticipant.jsx: 9 Uncaught 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;

Ответы [ 2 ]

2 голосов
/ 28 мая 2020

Модули всегда запускаются в строгом режиме , где неявные глобальные переменные запрещены.

Вам нужно явно объявить переменную (с const (или let или var)). 

const handleInputChangeName = (event) => {
2 голосов
/ 28 мая 2020

В отличие от компонента класса, где допустимо 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}
...