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元素上。有一些句法差异：

React事件使用camelCase而不是小写命名。
使用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

您以错误的方式实施了一些错误：

所有功能都应移出render（），以便进行最佳练习
您需要在render（）中添加return（）表模板，以便在组件中呈现它

虚拟DOM语法中的所有类都应更改为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中添加Edit Button

2 个答案: