Question

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

/** @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);

seen here as a JSBin

Answer 1

你正在使用defaultValue - 这使得输入成为uncontrolled component，它获得了一个初始值，但是React再也没有触及它的显示值，除非你把整个组件吹掉（例如对它或祖先进行key更改，并且必须从头开始重新创建。

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

以下是相同的代码，但使用value，这使其成为controlled component，它反映了重新呈现时获得的新value：

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

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

1 个答案: