对多个输入使用 handleChange 函数答案

【问题标题】：Using handleChange function for several inputs对多个输入使用 handleChange 函数
【发布时间】：2020-02-18 09:24:15
【问题描述】：

我希望handleChange 函数只影响您更改的输入值。如果我更改“名字”输入，我希望只有该状态得到更新，第二个输入字段“姓氏”也是如此。非常感谢您就如何做到这一点提出建议。

状态对象

    const [user, setUser] = useState({
        firstName :"",
        lastName: "",
    });

输入

<input type="text" placeholder="Firstname" onChange={handleChange}/>
<input type="text" placeholder="Lastname"  onChange={handleChange}/>

handleChange() 函数

    const handleChange = (event) => {
        setUser({...user, firstName:event.target.value})
     }

【问题讨论】：

您需要一个可用于所有输入的handleChange 函数吗？
是的，目前我已经通过两个handleChange 解决了这个问题，每个输入一个。我希望有一个功能适用于两者。

标签： javascript reactjs

【解决方案1】：

这应该符合您的预期 - 将 name 属性添加到与管理值的状态对象匹配的输入中。

const MyForm = () => {
    const [user, setUser] = useState({
        firstName :"",
        lastName: "",
    });
    const handleChange = (event) => {
      setUser({ ...user, [event.target.name]: event.target.value })
    }
    return (
     <form>
        <input type="text" name="firstName" placeholder="Firstname" onChange={handleChange}/>
        <input type="text" name="lastName" placeholder="Lastname"  onChange={handleChange}/>
     </form>

    )
}

希望这有帮助:)

【讨论】：

【解决方案2】：

const makeHandleChange = key => event => {
  setUser({...user, [key]: event.target.value});
};

<input type="text" placeholder="Firstname" onChange={makeHandleChange('firstName')}/>
<input type="text" placeholder="Lastname"  onChange={makeHandleChange('lastName')}/>

【讨论】：

【解决方案3】：

这是一些粗略的代码，因为我无法对其进行测试，但理论应该是相同的，可能需要调整，您可以使用属性访问器来更新您的对象。只需稍微调整 HTML。

输入

<input type="text" placeholder="Firstname" name="firstName" onChange={handleChange}/>
<input type="text" placeholder="Lastname" name="lastName"  onChange={handleChange}/>

handleChange() 函数

   const handleChange = (event) => {

        setUser({...user, [event.target.getAttribute('name')]:event.target.value})
     }

【讨论】：

【解决方案4】：

您可以更改输入并添加name 的另一个属性，然后访问事件的name 属性并将其作为属性名称传递给setUser(...) 函数。

输入：

<input type="text" placeholder="Firstname" name="firstName" onChange={handleChange}/>
<input type="text" placeholder="Lastname" name="lastName" onChange={handleChange}/>

handleChange() 函数

    const handleChange = (event) => {
        setUser({...user, [event.target.name]: event.target.value})
     }

【讨论】：