为什么事件目标不通过多个反应函数？

Question

所以我试图在 React 中创建一个高度可重用的文本字段组件，但每当我尝试访问 event.target.name 或 event.target.value 时，我都会得到空数据。

有没有办法让这段代码工作？

function LoginForm() {
  const [form, setValues] = useState({
    username: "",
    password: ""
  });

  const printValues = e => {
    e.preventDefault();
    console.log(form.username, form.password);
  };

  const updateField = e => {
    setValues({
      ...form,
      [e.target.name]: e.target.value
    });
  };

  const TextField = props => {
    return(
      <label>
        React Component:
        <input
          value={props.value}
          name='react'
          onChange={e => props.change(e)}
        />
      </label>
    )
  }

  return (
    <form onSubmit={printValues}>
      <TextField
        value={form.username}
        name='username'
        change={updateField}
      />
      <br />
      <TextField
        value={form.password}
        name='password'
        change={updateField}
      />
      <br />
      <button>Submit</button>
    </form>
  );
}

此代码是我已经开始工作的示例。为什么这段代码有效，而上面的代码无效？

function LoginForm() {
  const [form, setValues] = useState({
    username: "",
    password: ""
  });

  const printValues = e => {
    e.preventDefault();
    console.log(form.username, form.password);
  };

  const updateField = e => {
    setValues({
      ...form,
      [e.target.name]: e.target.value
    });
  };

  return (
    <form onSubmit={printValues}>
      <label>
        Username:
        <input
          value={form.username}
          name="username"
          onChange={updateField}
        />
      </label>
      <br />
      <label>
        Password:
        <input
          value={form.password}
          name="password"
          type="password"
          onChange={updateField}
        />
      </label>
      <br />
      <button>Submit</button>
    </form>
  );
}

Answer 1

您的子组件的名称 prop 硬编码为 name='react'，这是因为您的 [e.target.name]: e.targe.value 语句不起作用，请改用 name={props.name}，它会解决问题。

 const TextField = props => {
    return(
      <label>
        React Component:
        <input
          value={props.value}
          name={props.name}
          onChange={e => props.change(e)}
        />
      </label>
    )
  }

Answer 2

您展示的第一个代码在 TextField 组件中有一个 prop change 而不是 onChange 事件侦听器。

我在这里查看https://material-ui.com/es/components/text-fields/，因为我从未使用过material-ui，并且在示例中他们仍然使用常规onChange。

所以尝试将change 更改为onChange，因为这是两个代码示例之间除了使用组件之外的唯一区别。