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

在ES6中，ComputedPropertyName允许我们做类似的事情，这反过来意味着我们可以。然而，如果您环顾一下动态设置状态的示例，它们往往都有一个共同点——状态键的名称是硬编码的。例如：

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

变成类似于：

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

---

显然，上面的方法不起作用，因为keyname是未定义的，但这里的目的是，name可以接受state1的值，而无需硬编码。如何实现这一点？

新的useReducer附带了挂钩和上下文。看看这个，我认为这是解决你问题的最佳模式

您可以拥有一个数组，其中包含具有键类型和名称的对象，您可以使用该数组设置初始状态并动态呈现输入。这样，您只需在数组中更改一次值。你可以这样做

这是一个

希望这有帮助

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

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