javascript - React - 动态设置状态，无需硬编码关键字段

Question

在 ES6 中，CompulatedPropertyName 允许我们执行类似 use a variable as a key 的操作，这又意味着我们可以 set state dynamically 。但是，如果您查看动态设置状态的示例，它们往往都有一个共同点——状态键的名称是硬编码的。举个例子:

class Input extends React.Component {
    state = { state1: "" };

    handleChange = event => {
        const {
            target: { name, value }
        } = event;

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

    render() {
        return (
            <div>
                <label>
                    <input
                        type="text"
                        name="state1"
                        value="new value"
                        onChange={this.handleChange}
                    />
                </label>
            </div>
        );
    }
}

这是有效的，因为我们有一个名为“state1”的状态键，如 state = { state1: ""}; 行所示，并且我们将输入字段中的名称硬编码为该状态键状态键，如 name="state1" 行所示。

我不喜欢这个解决方案，因为这意味着我现在必须在多个位置跟踪 state.state1"。如果我要重构state.state1来代替是 state.state2，我必须去查找 name="state1"1 并将其更新为读取 name="state2"。而不用担心那，我想知道是否有一种方法可以动态设置状态，而无需对此状态键进行硬编码。也就是说，我正在寻求更改

<input
      type="text"
      name="state1"
      value="new value"
      onChange={this.handleChange}
      />

进入类似:

<input
      type="text"
      name={this.state.state1.keyname}
      value="new value"
      onChange={this.handleChange}
      />

显然上面的方法不起作用，因为 keyname 未定义，但这里的目的是 name 可以采用“state1”的值，而无需我对其进行硬编码。如何实现这一目标？

Answer 1

您可以拥有一个包含带有键 type 和 name 的对象的数组，您可以使用它们来设置初始状态并动态呈现输入。这样您只需在数组中更改一次值。你可以做这样的事情。

这是一个codesandbox

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  constructor() {
    super();
    this.arr = [
      { type: "text", name: "state1" },
      { type: "password", name: "state2" }
    ];

    // set the state keys dynamically from this.arr
    this.state = this.arr.reduce((agg, item) => {
      agg[item.name] = "";
      return agg;
    }, {});
  }

  handleChange = event => {
    const {
      target: { name, value }
    } = event;

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

  renderInputs = () => {
    return this.arr.map((item, i) => (
      <div key={i}>
        <label>
          <input
            type={item.type}
            name={item.name}
            value={this.state[item.name]}
            onChange={this.handleChange}
          />
        </label>
      </div>
    ));
  };

  render() {
    const inputs = this.renderInputs();
    return <div>{inputs}</div>;
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

希望这有帮助!