React.js表:删除行按钮可以直观地删除不正确的行

Question

我正在使用React.js动态创建一个包含文本框的html表。我有一些行可以通过单击按钮删除。我希望，当我在第一行单击"删除"时，表会在删除了第1行的情况下重新渲染。但是，当react重新绘制表时，它看起来总是从DOM中删除表的最后一行，而不是使用state对象中的实际值。也许我发现了虫子？这是我的代码：

/** @jsx React.DOM */
var MyApp = React.createClass({
    getInitialState: function () {
      return {
        col_one: ['c1r1', 'c1r2', 'c1r3'],
        col_two: ['c2r1', 'c1r2', 'c1r3'],
        col_three: ['c3r1', 'c3r2', 'c3r3']
      }
    },
    handleCellChange: function (colName, index, e) {
      console.log('onChange:', colName, index, e.target.value);
    },
    handleRemove: function (i) {
      var that = this;
      console.log('removing row:',i);
      _.forEach(this.state, function (val, colName) {
        that.state[colName].splice(i,1); // BUG???
        //_.pullAt(that.state[key], i); // doesn't work either
      });
      console.log(this.state);
      this.setState(this.state);
    },
    render: function() {
      var that = this,
        rows = [],
        cols = _.keys(this.state);
      rows.push(
      <tr>
      {cols.map(function (col) {
        return (
          <th>{col}</th>
        )
      })}
      </tr>
      )
      for (var i = 0; i < this.state[cols[0]].length; i++) {
        rows.push(
          <tr>
            {cols.map(function (col) {
              return (
                <td>
                  <input type="text" defaultValue={that.state[col][i]} onChange={that.handleCellChange.bind(that, col, i)} />
                </td>
              )
            })}
            <td>
              <button onClick={this.handleRemove.bind(this, i)}>Remove</button>
            </td>
          </tr>
        )
      }
      return (
        <table>
          <tbody>
            {rows}
          </tbody>
        </table>
      );
    }
});
React.renderComponent(<MyApp />, document.body);

此处显示为JSBin

Answer 1

您使用的是defaultValue，它使输入成为一个不受控制的组件，它会设置一个初始值，但React永远不会再触摸它显示的值，除非您将整个组件吹走（例如key更改或祖先），并且它必须从头开始重新创建它。

这就是为什么你看不到新的defaultValue被显示的原因——因为每一行上都没有唯一的键，React发现重新渲染时少了一行，并从真实DOM中删除了最后一行，但保留行中输入的任何新defaultValue都没有效果。。

这是相同的代码，但使用了value，这使它成为一个受控组件，反映了它在重新渲染时得到的新value：

http://jsbin.com/hacitidaqe/1/