在react-bootstrap-table中添加Edit Button

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

我正确实施了吗？

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

像这样写格式化程序函数：

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

为什么编辑onclick无法正常工作？

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

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

1. React事件使用camelCase而不是小写命名。

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

建议：

我建议您在render方法之外定义并使用this关键字来访问，而不是在render方法中定义这些函数。

像这样：

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>
    )
}

Answer 2

您以错误的方式实施了几个错误：

1. 为了最佳实践，所有函数都应该移出render（）
2. 您需要在render（）中添加return（）表模板，以便在组件中呈现它

3. 虚拟DOM语法中的所有类都应更改为className，因此应将其写为：

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

   使用组件的test（）引用。