React-NextJs - 将输入属性和输入值中的数据作为键：值 json 传递到状态

Question

我试图从一个函数中设置用户注册状态，该函数从表单中的每个输入运行，该函数接收2个参数。的关键,价值键等于输入名称属性，值等于输入值。

当我运行这个函数时，函数接收的参数是正确的，但是当我在setState中使用key:value时，键仍然是"key"值正确传递…

下面是代码

const [userRegister, setUserRegister] = useState(
{
"userFirstName":"", 
"userLastName":"", 
"userEmail":"", 
"userPhoneNumber":"", 
"userPassword":""
}
);
function handleValidation(key, value) {
console.log(key);
console.log(value);
setUserRegister({...userRegister , key:value})
}

<input 
type="text" 
name="userFirstName" 
id="userFirstName" 
placeholder="first name"
onBlur={(e) => handleValidation(e.target.name, e.target.value)}
/>

谢谢:)

Answer 1

要将变量的值替换为对象的键，请使用[]。例子:setUserRegister({...userRegister , [key]:value})

Answer 2

你必须这样尝试:

const [userRegister, setUserRegister] = useState(
{
"userFirstName":"", 
"userLastName":"", 
"userEmail":"", 
"userPhoneNumber":"", 
"userPassword":""
}
);
function handleValidation(e) {
setUserRegister({...userRegister, 
[e.target.name]:e.target.value
});
}
<input 
type="text" 
name="userFirstName" 
id="userFirstName" 
placeholder="first name"
onBlur={handleValidation}
/>