Question

我希望handleChange函数只影响您更改的输入值。如果我更改“ firstName”输入，我希望只有该状态被更新，第二个输入字段“ lastName”也将更新。对此提出了很多建议。

StateObject

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

Answer 1

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

Answer 2

您可以更改输入并添加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})
     }

Answer 3

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')}/>

Answer 4

这应该可以满足您的期望-将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>

    )
}

希望这会有所帮助：）

对多个输入使用handleChange函数

4 个答案: