React-Next Js - 将数据从输入属性传递到输入值作为 key:value json 到状态

Question

我正在尝试通过一个函数设置用户注册状态，该函数运行来自表单中的每个输入，并且该函数接收 2 个参数..键和值键等于输入名称属性，值等于输入值..

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

这是代码。

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

React-Next Js - 将数据从输入属性传递到输入值作为 key:value json 到状态

React-NextJs - pass data from input attribute & input value as key:value json to state

reactjs

next.js

use-state