如何处理对象属性内的事件函数
How to handle event function inside object attribute?
你好,我使用bootstrap-table的web应用程序,我需要过渡到另一个url时,一个表行被点击。"On row click"事件是通过一个对象属性onRowClick来处理的,在这个对象属性中,你可以为它分配一个函数,该函数将行数据作为参数。
onRowClick: Function
指定一个回调函数,该函数将在行单击后调用。这个函数有一个参数:row,它是你点击的行数据。
class SystemTable extends React.Component {
constructor() {
super();
this.state = {
data: sampleSystems
}
}
displaySystemInfo(row) {
const systemId = row._id;
this.context.router.transitionTo(`/system/${systemId}`);
//browserHistory.push(`/system/${systemId}`);
}
render() {
function osName(cell, row) {
return cell.name;
}
function batteryCondition(cell, row) {
return cell.condition;
}
var selectRowProp = {
mode: "checkbox",
bgColor: "rgb(204, 230, 255)"
};
var tableOptions = {
sizePerPage: 5,
deleteText: "✗ Delete Selected",
paginationSize: 3,
clearSearch: true,
hideSizePerPage: true,
onRowClick: function(row) {
// here
}
};
return (
<BootstrapTable
className="react-bs-table"
data={this.state.data.systems}
striped={true}
hover={true}
pagination={true}
selectRow={selectRowProp}
deleteRow={true}
multiColumnSearch={true}
search={true}
ignoreSinglePage={true}
options={tableOptions}
>
<TableHeaderColumn dataField="_id" isKey={true} dataAlign="center"
searchable={false}>ID</TableHeaderColumn>
<TableHeaderColumn dataField="serialnumber" dataAlign="center"
searchable={false}>Serial Number</TableHeaderColumn>
<TableHeaderColumn dataField="model" dataAlign="center"
dataSort={true}>Model</TableHeaderColumn>
<TableHeaderColumn dataField="os" dataAlign="center" dataSort={true}
dataFormat={osName} filterValue={osName}>OS</TableHeaderColumn>
<TableHeaderColumn dataField="battery" dataAlign="center" dataSort={true}
dataFormat={batteryCondition} filterValue={batteryCondition}>
Battery Condition</TableHeaderColumn>
</BootstrapTable>
)
}
SystemTable.contextTypes = {
router: React.PropTypes.object
}
export default SystemTable;
我想做的是像这样调用一个函数:
displaySystemInfo(row, event) {
event.preventDefault();
const systemId = row._id;
this.context.router.transitionTo(`/system/${systemId}`)
}
内:
onRowClick: function(row) {
}
我一直在尝试这样做:
onRowClick: function(row) {
(e) => this.displaySystemInfo(row, e);
}
,但它不工作,我很抱歉,如果它是一个简单的修复,但我只是不知道如何处理事件内部的onRowClick属性。任何帮助都很感激,谢谢!
编辑
忘记提及我所说的"it doesn't work"是什么意思了,我得到了以下警告:
warning Expected an assignment or function call and instead saw an expression no-unused-expressions
,点击什么也没发生
为什么需要一个e.p preventdefault ?应该是
onRowClick: this.displaySystemInfo
或
onRowClick: function(row) {
const systemId = row._id;
this.context.router.transitionTo(`/system/${systemId}`)
}
onRowClick自动传递行数据,但是tableow源中的单击处理程序不提供直接抓取和操作单击事件信息的钩子。
你试过了吗:
onRowClick: function(row) {
retrun displaySystemInfo(row, e);
}
相关文章:
- 如何使用jquery迭代具有相同属性的html元素并查找onclick事件
- JavaScript-动态SVG-onload属性-未触发事件
- 手柄'img'单击事件并插入'alt'使用jQuery将属性转换为文本框
- JQuery:使用clone()生成的元素不采用原始的事件属性
- JS事件未更改输入禁用属性
- 从其他元素上的单击事件访问image src属性
- 使用自定义数据属性或将数据绑定到处理程序来处理事件
- 如何从jQuery的事件对象中检索属性
- 更改el属性时未激发主干视图事件
- SVG-全局属性和事件的列表
- jQuery:使用实时事件添加tabindex属性
- 选中javascript中的属性集时,复选框更改事件未触发
- 我想从使用onkeypress事件的文本区域获取一个属性
- 取消 iframe 中具有 target=“_parent” 属性的链接事件
- datalist获取选定的值和自定义属性(无事件)
- Google事件侦听器:未捕获类型错误:无法读取属性'addEventListener'为null
- 将属性添加到窗元素时是否引发事件
- 更改视图属性 事件聚合器 Aurelia
- 在'onmouseover'中修改HTML's CSS属性事件
- jQuery中的自定义属性事件