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

Question

问题：

我无法改变状态。我需要根据输入字段的"name"属性更改状态对象的键。

法典：

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

Answer 1

感谢Brian Thompson。 由于我使用的是功能更新，因此该事件在使用之前正在重置。 所以，我使用了e.persist((。

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

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