为对象数组反应输入 setState

Question

查看表格以编辑Google Contacts 中的电话号码。

假设我的状态如下：

    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} />

您将如何实现handleChange 来调用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>

Answer 2

2 个选项

1. 按照 Paul Fitzgerald 的建议，制作一个具有自己状态的 Phone 组件。

2. 将索引添加到data-index 属性并检查handleChange 中的值。

示例 2：

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

然后在handleChange:

handleChange(e) {
    ...
    const i = e.target.dataset.index;
    ...
}