React自定义表单组件如何传递多个value与onChange属性

• 你当前的写法问题在于，给同一组件传递重复的属性名会导致后续属性覆盖前者，所以首先要给两组value/onChange设置有区分度的属性名，分别对应姓名和号码字段
• 原生input元素的事件对象event.target只有标准的value属性，和你给自定义组件设置的props命名无关，之前event.target.numval不生效是因为你混淆了组件自定义props和原生DOM属性的概念

第一步：修改父组件传参写法 #

return (
  ...
  <PersonForm
    onSubmit={addName}
    nameValue={newName}
    onNameChange={handleName}
    numberValue={newNumber}
    onNumberChange={handleNumber} 
  />
)

第二步：在PersonForm自定义组件内部接收props，分别绑定到对应input #

// PersonForm.jsx 内部代码示例
export default function PersonForm(props) {
  return (
    <form onSubmit={props.onSubmit}>
      <div>
        name: <input value={props.nameValue} onChange={props.onNameChange} />
      </div>
      <div>
        number: <input value={props.numberValue} onChange={props.onNumberChange} />
      </div>
      <div>
        <button type="submit">add</button>
      </div>
    </form>
  )
}

• 你的原有handleName、handleNumber逻辑不需要做任何修改，绑定到input的onChange后依然可以正常读取event.target.value

内容的提问来源于stack exchange，提问作者Yashmeen