React - 无法使用输入字段属性作为键设置状态答案

【问题标题】：React - Can't setState using input field attribute as keyReact - 无法使用输入字段属性作为键设置状态
【发布时间】：2023-03-26 05:07:01
【问题描述】：

问题：

我无法动态地更改状态。我需要根据输入字段的“名称”属性更改状态对象的键。

代码：

const addressValue = (e) => {
        setAddress(state => ({
            ...state,
            [e.target.name]: e.target.value
        }));
    };
/****************************************************************
* giving error while typing "Cannot read property 'name' of null"
*****************************************************************/
<form onSubmit={submitHandler}>
        <div className="form-group">
            <input id="address-line-1" className="form-control" value={address.line1}
                onChange={addressValue} name="line1" type="text" placeholder="Line 1" />
        </div>
        <div className="form-group">
            <input id="address-line-2" className="form-control" value={address.line2}
                onChange={addressValue} name="line2" type="text" placeholder="Line 2" />
        </div>
</form>

对象的初始值

{
line1 : "CA",
line2 : "US"
}

【问题讨论】：

阅读here 了解反应合成事件。基本上，因为您使用的是功能更新，event 在使用之前已被重置。解决方案是使用e.persist() 或将相关值保存到事件对象之外的其他变量中。或者另一种选择是不使用功能更新，因为您的新状态不是从以前的状态派生的。
这能回答你的问题吗？ Reactjs - TypeError: Cannot read property 'value' of null
非常感谢！它奏效了，我学到了一些新东西。我真的很尊重像你这样花时间帮助他人的人。

标签： reactjs react-redux react-hooks

【解决方案1】：

感谢布赖恩·汤普森。由于我使用的是功能更新，因此该事件在使用之前正在重置。所以，我使用了 e.persist()。

const addressValue = (e) => {
    e.persist();
    setAddress(state => ({
        ...state,
        [e.target.name]: e.target.value
    }));
};

【讨论】：

const addressValue = ({target;{name,value}}) => { 会更容易，Brian 还说：or save the relevant values to other variables outside the event object.

【解决方案2】：

作为替代方案，您可以创建一个自定义的 useForm 钩子，如下所示：

import { useState } from 'react';

export const useForm = initialValues => {
    const [values, setValues] = useState(initialValues);

    return {
        values,
        handleChange: e => {
            setValues({
                ...values,
                [e.target.name]: e.target.value,
            });
        },
        reset: () => setValues(initialValues),
    };
};

然后你可以在任何表单组件中导入和使用它：（例如这里是一个登录表单）

import React from 'react';
import { useForm } from '../hooks/useForm';
import history from '../history';

export default function SignInForm() {
    const { values, handleChange, reset } = useForm({ email: '', password: '' });

    const handleSubmit = e => {
        e.preventDefault();
        // POST request or however you handle the submission
        reset();
        history.goBack();
    };

    return (
        <form onSubmit={handleSubmit} className='SignIn__form'>
            <input
                className='SignIn__form--input'
                type='email'
                name='email'
                placeholder='Enter your email...'
                onChange={handleChange}
                value={values.email}
            />
            <input
                className='SignIn__form--input'
                type='password'
                name='password'
                placeholder='Enter your password...'
                onChange={handleChange}
                value={values.password}
            />
            <button className='Button' type='submit'>
                Sign In
            </button>
        </form>
    );
}

【讨论】：