[英]Add Edit Button in react-bootstrap-table
I am using react-bootstrap-table to implement table structure in React, I tried to add edit button and onClick function for that but its not working. 我正在使用react-bootstrap-table在React中实现表结构,我试图添加编辑按钮和onClick函数,但它不起作用。
My code : 我的代码:
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>
)
}
Am I implementing correctly? 我正确实施了吗? why edit onclick not working ? 为什么编辑onclick无法正常工作? can anyone know how to add edit button in react-bootstrap-table
. 任何人都可以知道如何在react-bootstrap-table
添加编辑按钮。
Am I implementing correctly? 我正确实施了吗?
No, Instead of returning the string from function, return the JSX . 不,不是从函数返回字符串,而是返回JSX 。
Write the formatter function like this: 像这样写格式化程序函数:
function imgFormatter(cell,row) {
return <a href="#" onClick={test}>
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>;
}
why edit onclick not working ? 为什么编辑onclick无法正常工作?
About Events in JSX, As per DOC : 关于JSX中的事件,根据DOC :
Handling events with React elements is very similar to handling events on DOM elements. 使用React元素处理事件与处理DOM元素上的事件非常相似。 There are some syntactic differences: 有一些句法上的差异:
React events are named using camelCase, rather than lowercase. React事件使用camelCase而不是小写命名。
With JSX you pass a function as the event handler, rather than a string . 使用JSX,您可以将函数作为事件处理程序而不是字符串传递 。
Suggestion: 建议:
Instead of defining these functions inside render method, i will suggest you to define outside of render method and use this
keyword to access. 我建议您在render方法之外定义并使用this
关键字来访问,而不是在render方法中定义这些函数。
Like 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>
)
}
There are couple of errors you have implemented in the wrong way: 您以错误的方式实施了几个错误:
All the class in the virtual DOM syntax should be changed to className so it should be written as: 虚拟DOM语法中的所有类都应更改为className,因此应将其写为:
function imgFormatter(cell,row) { return '<a href="#" onClick={this.test}><i className="fa fa-pencil" aria- hidden="true"></i></a>'; }
with the test() reference from the component. 使用组件的test()引用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.