1

我正在使用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。

4

2 回答 2

3

我是否正确实施？

不，不是从函数返回字符串，而是返回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 方法中定义这些函数，而是在 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>
    )
}
于 2017-07-10T06:20:39.893 回答
0

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

  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() 引用。

于 2017-07-10T06:27:08.310 回答