请求解析React自定义表单Hook的返回逻辑及JavaScript方括号语法

嘿，我来帮你拆解这个问题！

首先，你困惑的那个带方括号的写法，叫做计算属性名（Computed Property Names），是ES6（ECMAScript 2015）引入的语法特性。

1. 计算属性名是什么？ #

平时我们写对象属性时，一般是直接写固定键名，比如：

const user = {
  username: 'johndoe'
};

但如果需要动态决定键名，就可以用计算属性名——把要作为键名的表达式放在方括号[]里。

回到你的代码：[e.target.name]: e.target.value
这里e.target.name是当前触发事件的表单元素（比如input）的name属性值，比如如果是一个name为"email"的输入框，这行代码就等价于：

"email": e.target.value

这样就能自动根据输入框的name，把对应的值更新到表单状态对象里，不用为每个输入框写单独的更新逻辑。

2. 这个useForm自定义Hook的功能 #

这个Hook是用来简化表单状态管理的，核心作用如下：

• 接收一个初始表单值对象（比如{ username: '', password: '' }），用useState保存成表单状态values
• 返回两个内容：当前的表单状态values，以及一个通用的表单输入处理函数
• 当任何表单元素触发onChange事件时，调用这个处理函数，它会通过计算属性名，自动把输入值更新到values中对应的字段（和元素name匹配的字段）

举个实际使用的例子，你就能明白它有多方便：

import { useForm } from './useForm';

function LoginForm() {
  // 初始化表单状态，对应两个输入框的name
  const [formValues, handleInputChange] = useForm({ username: '', password: '' });

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('提交的表单数据:', formValues);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="username"
        value={formValues.username}
        onChange={handleInputChange}
        placeholder="用户名"
      />
      <input
        type="password"
        name="password"
        value={formValues.password}
        onChange={handleInputChange}
        placeholder="密码"
      />
      <button type="submit">登录</button>
    </form>
  );
}

这样不管你有多少个表单输入框，只要它们的name和初始状态的键名对应，都可以复用同一个handleInputChange函数，不用重复写多个onChange处理逻辑，大大减少了冗余代码。

补充说明 #

代码里的...values是扩展运算符，作用是把原来的values对象里的所有属性都复制到新对象里，然后再用[e.target.name]: e.target.value覆盖对应的字段——这样就不会丢失其他表单字段的状态，只更新当前输入的那个字段。

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