こんにちは私は、テーブル行をクリックすると別のURLに移行する必要があるWebアプリケーションのためにブートストラップテーブルを使用しています。 「オン・クリック」イベントは、onRowClickというオブジェクト属性を使用して処理されます。この属性には、行データを引数として受け取る関数が割り当てられます。オブジェクト属性内でイベント関数を処理する方法は?
onRowClick:機能
は、行をクリックした後に呼び出されるコールバック関数を割り当てます。 この関数は1つの引数をとります:rowはあなたがクリックした行データです。内部
displaySystemInfo(row, event) {
event.preventDefault();
const systemId = row._id;
this.context.router.transitionTo(`/system/${systemId}`)
}
:私はこのようにそれをやろうとしてきた
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;
はこのような関数を呼び出している
onRowClick: function(row) {
(e) => this.displaySystemInfo(row, e);
}
でも動作しませんその単純な修正ですが、私はonRowClick属性内のイベントをどのように処理するか分かりません。どんな助けでも感謝しています!
EDIT
が、私は「それは動作しません」によって何を意味するか言及を忘れ、私は次の警告を得る:
warning Expected an assignment or function call and instead saw an expression no-unused-expressions
を、何もクリック時に発生しません。
これを試してみると、 'onRowClick:displaySystemInfo'、私は' error 'displaySystemInfo'が定義されていません。私はファイル全体で投稿を編集します。 – Tuco
ああ、そうだ。 displaySystemInfoをconst内のレンダリングとして宣言していると思いました。そのようなクラス宣言では、_this_.displaySystemInfo – RacheleM
と呼びます。イベント変数は必要ありませんが、ES6矢印関数を使用する必要があります: 'onRowClick:row => { const systemId = row._id; this.context.router.transitionTo( '/ system/$ {systemId}'); } ' – Tuco