Javascript 在react引导表中添加编辑按钮

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

render（）{
功能测试（）{
警报（“asd”）；
}
函数imgFormatter（单元格、行）{
返回“”；
}
返回(
身份证件
名称
用户名
电子邮件
可移动的
编辑
)
}

我的实施是否正确？为什么编辑onclick不起作用？有人知道如何在

react引导表中添加编辑按钮吗

我的实施是否正确

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

按如下方式编写格式化程序函数：

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

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

为了获得最佳实践效果，应将所有函数移出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>';
}

函数imgFormatter（单元格、行）{
返回“”；
}

使用组件中的test（）引用

是的，我也试过了，但出现了以下错误“Uncaught ReferenceError:测试未在HtmlanchoreElement上定义。单击“@ayyanarpms它应该可以工作，请检查更新部分并重试。我在更新的代码“Uncaught TypeError:无法读取未定义的属性‘bind’”中遇到了此错误。您是否在render方法之外定义了这些函数？
function imgFormatter(cell,row) {
     return '<a href="#" onClick={this.test}><i className="fa fa-pencil" aria-
          hidden="true"></i></a>';
}