Javascript 为什么事件目标不通过多个react函数？

因此，我试图在React中创建一个高度可重用的textfield组件，但每当我尝试访问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>
  );
}

函数LoginForm（）{ const[form，setValues]=useState({ 用户名：“”， 密码：“ }); 常量printValues=e=>{ e、 预防默认值（）； console.log（form.username、form.password）； }; 常数updateField=e=>{ 设定值({ …形式， [e.target.name]：e.target.value }); }; const TextField=props=>{ 返回( 反应组分： 道具更改（e）} /> ) } 返回(

提交 ); } 这段代码是我开始工作的一个例子。为什么这个代码有效，而上面的代码无效

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>
  );
}

函数LoginForm（）{ const[form，setValues]=useState({ 用户名：“”， 密码：“ }); 常量printValues=e=>{ e、 预防默认值（）； console.log（form.username、form.password）； }; 常数updateField=e=>{ 设定值({ …形式， [e.target.name]：e.target.value }); }; 返回( 用户名：
密码：
提交 ); }

---

您显示的第一个代码有一个prop

change

，而不是TextField组件中的

onChange

事件侦听器

我之所以看这里，是因为我从未使用过MaterialUI，在这个示例中，他们仍然使用常规的

onChange

---

因此，尝试更改

change

的

onChange

，因为除了组件的使用之外，这是两个代码示例之间唯一的区别。

您的子组件的名称为prop hardcoded

name='react'

，这是因为您的

[e.target.name]：e.target.value

语句不起作用，请使用

name={props.name}

，它将解决问题

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

const TextField=props=>{
返回(
反应组分：
道具更改（e）}
/>
)
}

请不要将答案写得像问题一样。有适当的系统来检查非答案（NAA）帖子。这个答案被他们中的一个错误地接受了。请考虑编辑它看起来更像一个答案。重新表述“你能检查一下改变是否解决了问题吗？”这是一个很好的观点。在我的项目中，我尝试了这一点，但仍然得到了相同的结果，但您将更改更改更改为onChange是正确的