Javascript 对多个输入使用handleChange函数

我希望

handleChange

函数只影响您更改的输入值。如果我更改“firstName”输入，我希望只有该状态得到更新，第二个输入字段“lastName”也得到更新。关于如何做到这一点的建议非常感谢

StateObject

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

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

输入

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

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

---

您可以更改输入并添加另一个

name

属性，然后访问事件的

name

属性，并将其作为属性名称传递给

setUser（…）

函数

输入：

handleChange（）函数

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

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

---

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

输入

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

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

const handleChange=（事件）=>{
setUser（{…user，[event.target.getAttribute（'name'）]：event.target.value}）
}

这应该满足您的期望-将name属性添加到与管理值的state对象匹配的输入中

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>

    )
}

constmyform=（）=>{
const[user，setUser]=useState({
名字：“，
姓氏：“，
});
常量handleChange=（事件）=>{
setUser（{…user[event.target.name]：event.target.value}）
}
返回(
)
}

希望这有帮助：）

constmakeHandleChange=key=>event=>{
setUser（{…user[key]：event.target.value}）；
};

您是否需要一个可用于所有输入的

handleChange

函数？是的，目前我已经解决了这个问题，有两个

handleChange

，每个输入一个。我希望有一个功能同时适用于两者。