javascript - 在 react-bootstrap-table 中添加编辑按钮

Question

我正在使用 react-bootstrap-table为了在 React 中实现表结构，我尝试为此添加编辑按钮和 onClick 函数，但它不起作用。

我的代码:

render(){
    function test(){
        alert("asd");
    }

    function imgFormatter(cell,row) {
        return '<a href="#" onClick="test();"><i class="fa fa-pencil" aria-
                  hidden="true"></i></a>';
    }

    return(
        <BootstrapTable data={this.state.members} bordered={ false } pagination={ true }>
            <TableHeaderColumn isKey dataField='memberid' dataSort>ID</TableHeaderColumn>
            <TableHeaderColumn dataField='name' dataSort>Name</TableHeaderColumn>
            <TableHeaderColumn dataField='username' dataSort>Username</TableHeaderColumn>
             <TableHeaderColumn dataField='email' dataSort>Email</TableHeaderColumn>
            <TableHeaderColumn dataField='mobile'>Mobile</TableHeaderColumn>
            <TableHeaderColumn dataField='edit' dataFormat={ imgFormatter }>Edit</TableHeaderColumn>
        </BootstrapTable>
    )
}

我的实现是否正确？为什么编辑 onclick 不起作用？谁知道如何在 react-bootstrap-table 中添加编辑按钮。

Answer 1

Am I implementing correctly?

不，不是从函数返回字符串，而是返回 JSX .

像这样编写格式化程序函数:

function imgFormatter(cell,row) {
    return  <a href="#" onClick={test}>
                <i class="fa fa-pencil" aria-hidden="true"></i>
            </a>;
}

why edit onclick not working ?

关于 JSX 中的事件，根据 DOC :

用 React 元素处理事件与处理事件非常相似在 DOM 元素上。有一些句法差异:

1. React 事件使用驼峰命名，而不是小写。

2. 使用 JSX，您可以传递函数作为事件处理程序，而不是字符串。

建议:

与其在 render 方法内部定义这些函数，我建议您在 render 方法外部定义并使用 this 关键字来访问。

像这样:

imgFormatter(cell,row) {
    return  <a href="#" onClick={this.test}>
                <i class="fa fa-pencil" aria-hidden="true"></i>
            </a>;
}

test(){
    console.log('clicked');
}

render(){
    return(
        <BootstrapTable data={this.state.members} bordered={ false } pagination={ true }>
            .....
            <TableHeaderColumn dataField='edit' dataFormat={ this.imgFormatter.bind(this) }>Edit</TableHeaderColumn>
        </BootstrapTable>
    )
}