Question

我想使用ReactJS在按钮点击时从html表中删除一行。问题是，在单击删除按钮时，始终会删除最后一行而不是单击的行。请告诉我的代码有什么问题？

码

var RecordsComponent = React.createClass({
    getInitialState: function() {
        return {
            rows: ['row1', 'row2', 'row3'],
            newValue: "new value"
        }
    },
    render : function() {
        return (
            <div>
                <table>
                    <tbody>
                    {this.state.rows.map((r) => (
                        <tr>
                            <td>{r}</td>
                            <td>
                                <button onClick={this.deleteRow}>Delete</button>
                            </td>
                        </tr>
                    ))}
                    </tbody>
                </table>
                <input trype="text" id={"newVal"} onChange={this.updateNewValue}></input>
                <button id="addBtn" onClick={this.addRow}>ADD</button>
            </div>
        );
    },
    updateNewValue: function(component) {
        this.setState({
            newValue: component.target.value
        });
    },
    addRow : function() {
        var rows = this.state.rows
        rows.push(this.state.newValue)
        this.setState({rows: rows})
    },
    deleteRow : function(record) {
        var index = -1;
        var clength = this.state.rows.length
        for( var i = 0; i < clength; i++ ) {
            if( this.state.rows[i].value === record.target.value ) {
                index = i;
                break;
            }
        }
        var rows = this.state.rows
        rows.splice( index, 1 )
        this.setState( {rows: rows} );
    }
});

React.render(<RecordsComponent/>, document.getElementById('display'))

Answer 1

你需要在func deleteRow上传递一个参数

<button onClick={() => this.deleteRow(r)}>Delete</button>

我重构了一小部分你的功能

deleteRow : function(record) {
    this.setState({
        rows: this.state.rows.filter(r => r !== record)
    });
}

Answer 2

在deleteRow中，您正在查找与record.target.value匹配的行的索引（record实际上是一个事件），但event.target.value为空，因此索引保持为{ {1}}，-1删除最后一个元素。

您应该自行传递行数据，例如：

rows.splice(-1, 1)

在ReactJS中删除最后一行而不是单击的行

2 个答案: