React中为何[e.target.name]能动态更新对象属性而e.target.name不行？

问题描述 #

我有一个包含四个输入字段的HTML表单，通过onChangeHandler事件处理器提取它们的name属性（用e.target.name获取）。现在需要复制initialState对象来更新state，同时确保触发onChange事件的输入字段值被更新。但发现直接用e.target.name作为属性名无效，而用[e.target.name]就能生效，这是为什么？

示例代码 #

const initialState = {
    displayName: '',
    email: '',
    password: '',
    password_confirmation: ''
}

function SignUpForm(){

    const [fieldState , setFieldState] = useState(initialState);
    const {displayName , email , password , password_confirmation} = fieldState;

    const onChangeHandler = (e) => {
        setFieldState({
            ...fieldState, // 复制现有state的所有属性
            [e.target.name]: e.target.value // 更新当前触发事件的字段值
        })
    }

    return(
        <form>
            <input type="text" name="displayName" onChange={onChangeHandler} value={displayName}/>
            <input type="email" name="email" onChange={onChangeHandler} value={email}/>
            <input type="password" name="password" onChange={onChangeHandler} value={password}/>
            <input type="password" name="password_confirmation" onChange={onChangeHandler} value={password_confirmation}/>
        </form>
    );
}

export default SignUpForm

原因解释 #

这是JavaScript对象字面量的语法规则导致的：

• 普通字面量属性名：如果直接写e.target.name: e.target.value，JavaScript会把e.target.name当作一个固定的字符串属性名，而不是去计算这个表达式的值。也就是说，你实际是给对象新增了一个名为"e.target.name"的属性，而不是更新state里对应的displayName、email等属性，所以无法达到预期效果。
• 计算属性名（方括号语法）：[e.target.name]是ES6新增的计算属性名语法，它会先执行括号内的表达式e.target.name，得到当前输入框的name属性值（比如"displayName"），再把这个值作为对象的属性名。这样就能精准对应到state里的目标属性，结合展开运算符...fieldState保留其他未修改的属性，最终实现只更新当前触发事件的字段值。

内容的提问来源于stack exchange，提问作者Chukwuebuka