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

Question

我正在使用 react-bootstrap-table 在 React 中实现 table 结构，我尝试为此添加编辑按钮和 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?

不，不是 return 从函数中获取字符串，return 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 个元素上。存在一些句法差异：

React 事件使用驼峰命名，而不是小写。
使用 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>
    )
}

Answer 2

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

为了最佳实践，所有函数都应移出 render()
您需要在 render() 中添加 return() table 模板，以便在组件中呈现它

虚拟DOM语法中的所有class都应该改为className所以应该写成：

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

使用组件中的 test() 引用。

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

Add Edit Button in react-bootstrap-table

javascript

reactjs

react-bootstrap-table