具有动态键名的 Reactjs setState() 不起作用答案

【问题标题】：Reactjs setState() with a dynamic key name not working具有动态键名的 Reactjs setState() 不起作用
【发布时间】：2019-03-14 15:46:39
【问题描述】：

这里是代码https://codesandbox.io/s/yqxr2z02pv

我正在使用此代码，所以我不需要在更新时一一设置状态

  onUpdate = (event) => {
    const { target: { name, value } } = event
    console.log(value);
    this.setState({ [name]: value })
  }

但是当输入值改变时组件不显示值。

有什么简单的例子可以做到这一点吗？

【问题讨论】：

标签： reactjs state

【解决方案1】：

您可以将状态保留在Parent 组件中，并将它们作为道具传递下来，而不是复制Parent 和Child 中的状态。您也可以将name 属性放在inputs 上，然后直接使用onUpdate 属性传递事件。

示例

class Parent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      firstName: "firstName",
      lastName: "lastName"
    };
  }

  onUpdate = event => {
    const {
      target: { name, value }
    } = event;
    this.setState({ [name]: value });
  };

  render() {
    const { firstName, lastName } = this.state;

    return (
      <div>
        <h2>Parent</h2>
        Value in Parent Component State firstName: {firstName}
        <br />
        Value in Parent Component State lastName: {lastName}
        <br />
        <Child
          onUpdate={this.onUpdate}
          firstName={firstName}
          lastName={lastName}
        />
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    const { firstName, lastName, onUpdate } = this.props;

    return (
      <div>
        <h4>Child</h4>
        first Name
        <input
          type="text"
          placeholder="type here"
          name="firstName"
          onChange={onUpdate}
          value={firstName}
        />
        <br />
        last Name
        <input
          type="text"
          name="lastName"
          placeholder="type here"
          onChange={onUpdate}
          value={lastName}
        />
      </div>
    );
  }
}

ReactDOM.render(<Parent />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

【讨论】：

【解决方案2】：

尝试先创建一个对象，然后像这样添加动态键

onUpdate = (event) => {
    const { target: { name, value } } = event
    console.log(value);

    const newData = {};
    newData[name] = value;
    this.setState(newData);
}

【讨论】：

【解决方案3】：

我编辑你的代码。你可以试试。 https://codesandbox.io/s/m37wlryy78?fontsize=14

Child.js

import React from "react";

class Child extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      firstName: "",
      lastName: ""
    };
  }

  update = e => {
    this.props.onUpdate(e);
    this.setState({ [e.target.name]: e.target.value });
  };

  render() {
    return (
      <div>
        <h4>Child</h4>
        first Name
        <input
          type="text"
          placeholder="type here"
          onChange={this.update}
          value={this.state.firstName}
          name={"firstName"}
        />
        <br />
        last Name
        <input
          type="text"
          placeholder="type here"
          onChange={this.update}
          value={this.state.lastName}
          name={"lastName"}
        />
      </div>
    );
  }
}

export default Child;

【讨论】：

你能在你的回答中解释你有什么改变吗？出了什么问题？