javascript - 如何使用react以正确呈现可移动输入的列表？

Question

我正在尝试在 react 中渲染输入列表并将输入值绑定(bind)到数组。我还试图使其列表项可移动。但是，当我从数组中删除一个项目时，输入项目不会按照我的预期更新。不是删除从数组中间删除的输入，而是删除最后一个输入并保留中间输入。

var Inputs = React.createClass({
    getInitialState: function() {
    return {
      inputarr: ['']
    };
    },
  render: function() {
    var self = this;
    return <div>{ this.state.inputarr.map(function (value, i) {
        return <div key={i}><input onChange={function (e) {self.onChangeInput(i, e)}}/>
      { i < (self.state.inputarr.length - 1) && <button onClick={function () {self.onRemove(i)}}>x</button>}
      </div>;
    })  }</div>;
  },
  onChangeInput: function (i, e) {
    this.state.inputarr[i] = e.target.value;
    if (this.state.inputarr[this.state.inputarr.length - 1] !== '') {
      this.state.inputarr.push('');
    }
    this.setState({
      inputarr: this.state.inputarr.slice(0)
    });
  },
  onRemove: function (i) {
    this.state.inputarr.splice(i, 1);
    this.setState({
      inputarr: this.state.inputarr.slice(0)
    });
  }
});

ReactDOM.render(
  <Inputs/>,
  document.getElementById('container')
);

您可以在这个 fiddle 中运行它:https://jsfiddle.net/vvd7hex9/1/

会发生什么？

1. 向第一个输入添加一些内容，第二个输入将会出现。输入 3 个不同的输入。
2. 使用 x 按钮删除第二个输入。

最后一个输入被删除。

我期望发生什么

要删除中间的输入，并且只有 2 个输入应包含 inputarr 数组中的内容。

为什么会发生这种情况？我该如何修复它以删除正确的输入？

Answer 1

啊啊啊，这是一个经典的 JavaScript 问题。它与您的 map 语句有关。具体详情可以阅读here ，但归根结底是，当点击事件实际触发时，i 的值等于 inputarr.length - 1。要解决此问题，您需要某种方法在每次循环期间保留 i 的值。最简单的方法是将点击事件更改为:

<button onClick={self.onRemove(i)}>x</button>

并将 onRemove 更改为:

onRemove: function (i) {
    var self = this;
    return function(e) {
      self.state.inputarr.splice(i, 1);
      self.setState({
        inputarr: this.state.inputarr.slice(0)
      });
    }
  }

有关闭包的更多信息可以找到 here如果你不熟悉