为对象数组反应输入 setState

Question

查看表单以在Google 通讯录中编辑电话号码。

假设我的状态如下所示：

    this.state = {
        phones: [
            {
                country: 'US',
                label: 'Home',
                number: '555'
            }
        ],

    };

我的 HTML 看起来像，在一个循环中并简化为所有文本输入：

<input type="text" value={this.state.phones[index].country} onChange={this.handleChange} />
<input type="text" value={this.state.phones[index].number} onChange={this.handleChange} />
<input type="text" value={this.state.phones[index].label} onChange={this.handleChange} />

你将如何实现handleChangeto 调用，setState同时支持它是一个数组，并且数组中的每个项目都有多个属性？

我在其他问题中看到了一些答案，但没有一个完整的。

Answer 1

您可以执行类似以下操作并制作一个Phone组件。

class Phone extends React.Component {

  render() {
    return (
      <div className="App">
        <p>{this.props.label}</p>
        <input
          type="number"
          onChange={this.props.updateNumber}
          value={this.props.number}
        />
      </div>
    );
  }
}

class App extends React.Component {
  state = {
    phones: [
      {
        name: "US",
        number: ""
      },
      {
        name: "UK",
        number: ""
      }
    ]
  };

  updateNumber = (e, index) => {
    const phones = this.state.phones;
    phones[index].number = e.target.value;
    this.setState({
      phones
    });
  };

  render() {
    return (
      <div className="App">
        {this.state.phones.map((phone, i) => {
          return (
            <Phone
              updateNumber={e => {
                this.updateNumber(e, i);
              }}
              number={this.state.phones[i].number}
              label={phone.name}
            />
          );
        })}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='root'></div>