React 从 event.target 的表单名称值对自动生成状态答案

【问题标题】：React auto generate state from form name value pairs from event.targetReact 从 event.target 的表单名称值对自动生成状态
【发布时间】：2021-03-29 02:01:12
【问题描述】：

有没有办法自动从表单生成状态值。假设我有一个包含 100000 输入的表单都有随机名称，所以不像 name_1 name_2 左右。名称不会自动生成或任何东西。（我没有，只是好奇）。

我可以为每个输入字段自动生成状态值吗？我们可以有一个函数来处理输入并使用e.target.name 和e.target.value 来设置状态。但是我们可以用这些名称将状态初始化为空值吗？您在构造函数中创建状态，因此构造函数还不知道这些字段。还是我们最初将状态留空，然后在 onChange 发生时将新字段添加到状态。我们检查名称是否处于状态，如果是，则更新如果不是，则深度复制旧状态并添加新名称/值并将其设置为新状态？

谢谢。

我正在寻找更好的方法来做到这一点。

【问题讨论】：

标签： reactjs forms state

【解决方案1】：

this.setState({
  [e.target.name] : e.target.value
})

文章：https://medium.com/@bretdoucette/understanding-this-setstate-name-value-a5ef7b4ea2b4

Reactjs setState() with a dynamic key name?

【讨论】：

即设置。你最初是如何根据你的表单创建它的

【解决方案2】：

constructor(props) {
    super(props);
    this.state = {
      username: "",
      age: "",
    };
  }

  changeHandler = (e) => {
    this.setState({
      [e.target.name]: e.target.value,
    });
  };

  render() {
    return (
      <div>
        <input
          type="text"
          name="username"
          value={this.state.username}
          onChange={this.changeHandler}
        />
        <input
          type="text"
          name="age"
          value={this.state.age}
          onChange={this.changeHandler}
        />
      </div>
    );
  }

【讨论】：

我没有解释清楚。您会看到硬编码的用户名：“”和年龄：“”我希望系统能够根据表单自动添加这些。没有像密码这样的硬编码：“”。就像在处理 onChange 时拥有一个没有任何内容的空状态并添加新值。
如果您有很多表单输入，您必须生成这些字段。并且还假设这些输入字段的名称不会像 name_1 name under_2 那样生成。所以你不能对物体进行反射。所以我认为唯一的方法是创建一个空状态并在 onChage 上添加键，如果它们不存在，则保留旧状态。