如何在点击编辑图标ReactJS时获取特定的行数据？

Question

您好我正在使用自举表并用于显示一些数据。

示例：

当我点击编辑图标时，如何获取特定的行数据？

代码：

<table className="table table-striped table-custom">
    <thead>
    <tr>
        <td style={tableStyle}>Date</td>
        <td style={tableStyle}>Bill No</td>
        <td style={tableStyle}>Amount</td>
        <td style={tableStyle}>Edit</td>
        <td style={tableStyle}>Delete</td>
    </tr>
    </thead>
    <tbody>

    {this.state.customerIndividual.map(para => {
        return <tr key={para.id}>
            <td>{para.date}</td>
            <td>{para.billNo}</td>
            <td>{para.amount}</td>
            <td>
                <button className="btn btn-primary btn-xs" onClick={this.editMode} data-title="Edit" data-toggle="modal" data-target="#edit">
                    <span className="glyphicon glyphicon-pencil"></span>
                </button>
            </td>
            <td>
                <button className="btn btn-danger btn-xs" onClick={this.editMode} data-title="Delete" data-toggle="modal" data-target="#delete">
                    <span className="glyphicon glyphicon-trash"></span>
                </button>
            </td>
        </tr>
    })}

    </tbody>
</table>

Answer 1

使用onClick函数绑定每行的一些唯一标识符，每当您单击编辑按钮时，您将获得该值，使用该值从状态数组中获取数据。

您可以用作唯一标识符index, id, amount, date etc的值。

像这样写：

{this.state.customerIndividual.map((para, i) => {
    return <tr key={para.id}>
        <td>{para.date}</td><td>{para.billNo}</td><td>{para.amount}</td>
        <td><button onClick={this.editMode.bind(this, i)} ..... </button></td>
        <td><button onClick={this.editMode.bind(this, i)} ..... </button></td>
    </tr>;
})}

像这样写editMode：

editMode(index, event){
    console.log('item index = ', index);
    //data = this.state.customerIndividual[index];
}