0

我正在尝试做一个简单的表单任务来尝试学习 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, { useState } from "react";

function InputForm() {
  const [emailValue, 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)... 之后不期望 { 括号...所以控制台错误消息在试图弄清楚为什么它不接受它时是没有用的。

谢谢！

4

1 回答 1

0

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

你会想要

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

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

  // ...

（即便如此，你正在混合和匹配状态类型——你有一个表面上是字符串的状态原子（因为你用 a 初始化它""），然后你将一个对象分配给它......你可能正在寻找setEmailValue(value);那里。）

于 2020-10-16T20:48:49.637 回答