为什么我的handleChange方法被React拒绝了？

问题描述

我正在尝试做一个简单的表单任务来尝试和学习React Forms，但是我很难理解它的语法。

当我尝试以下代码时，它没有问题：

import React,{ useState } from "react";

function InputForm() {
  const [emailValue,setEmailValue] = useState("");

  console.log(emailValue);

  return (
    <>
      <form>
        <label>
          Email:
          <input
            type="text"
            name="input"
            value={emailValue}
            placeholder="type your email"
            onChange={(e) => setEmailValue(e.target.value)}
          />
        </label>
        <br />
        <br />
        <button type="submit" name="test">
          Submit Email
        </button>
      </form>
    </>
  );
}

export default InputForm;

但是，当我尝试清理它以便返回中没有逻辑时，在定义handleChange方法时出现错误。

import React,setEmailValue] = useState("");

  handleChange(e) {
    const { name,value } = e.target;
    setEmailValue({ [name]: value });
  };

  console.log(emailValue);

  return (
    <>
      <form>
        <label>
          Email:
          <input
            type="text"
            name="input"
            value={emailValue}
            placeholder="type your email"
            onChange={handleChange}
          />
        </label>
        <br />
        <br />
        <button type="submit" name="test">
          Submit Email
        </button>
      </form>
    </>
  );
}

export default InputForm;

有人可以解释为什么这种方式行不通吗？我得到的错误是React没期望{在handleChange（e）之后的括号...因此，控制台错误消息对于试图弄清为什么它不接受它毫无用处。

谢谢！

解决方法

这不是React拒绝任何东西，仅仅是，那不是正确的JavaScript语法。

你想要

function InputForm() {
  const [emailValue,setEmailValue] = useState("");

  const handleChange = (e) {
    const { name,value } = e.target;
    setEmailValue({ [name]: value });
  };

  // ...

（即使您正在混合和匹配状态类型，也有一个状态原子表面上是一个字符串（因为您使用""对其进行了初始化），然后在其中分配了一个对象...您可能正在那里寻找setEmailValue(value);。）