从Render内部调用React函数(Call a React Function from inside Render)

我正在使用这个表组件与radioboxes（行选择（单一）），我想更新反应状态到当前选定的行。

名为onRowSelect的函数显示所选行。要将状态更新为所选行，我创建了一个名为showRow（）的函数，该函数在onRowSelect中调用。但是，我一直得到一个this.showRow（）不是函数错误。

我在渲染函数之外使用showRow（）因为我需要用当前选择的行更新状态。

class ChooseRowExample extends Component { constructor(props) { super(props); this.state =({ chosenRow:"" }); this.showRow = this.showRow.bind(this); } showRow(row, isSelected){ console.log(row); //update state here } render() { var selectRowProp = { mode: "radio", clickToSelect: true, bgColor: "#A7EC57", onSelect: onRowSelect }; function onRowSelect(row, isSelected){ this.showRow(row, isSelected); } return ( <div> <BootstrapTable data={person} search={true} selectRow={selectRowProp}> <TableHeaderColumn dataField="id" isKey={true}>Client #</TableHeaderColumn> <TableHeaderColumn dataField="name">Company</TableHeaderColumn> <TableHeaderColumn dataField="contact_name">Client Name</TableHeaderColumn> </BootstrapTable> </div> ) } }

I'm using this table component with radioboxes (Row selection(Single)) and I want to update the react state to the currently selected row.

A function called onRowSelect shows the row selected. To update the state to the row selected, I created a function called showRow(), which is called in onRowSelect. However, I keep getting a this.showRow() is not a function error.

I'm using showRow() outside the render function because I need to update the state with the currently chosen row.

class ChooseRowExample extends Component { constructor(props) { super(props); this.state =({ chosenRow:"" }); this.showRow = this.showRow.bind(this); } showRow(row, isSelected){ console.log(row); //update state here } render() { var selectRowProp = { mode: "radio", clickToSelect: true, bgColor: "#A7EC57", onSelect: onRowSelect }; function onRowSelect(row, isSelected){ this.showRow(row, isSelected); } return ( <div> <BootstrapTable data={person} search={true} selectRow={selectRowProp}> <TableHeaderColumn dataField="id" isKey={true}>Client #</TableHeaderColumn> <TableHeaderColumn dataField="name">Company</TableHeaderColumn> <TableHeaderColumn dataField="contact_name">Client Name</TableHeaderColumn> </BootstrapTable> </div> ) } }

最满意答案

问题是onRowSelect中的this不是你期望的组件实例。

您可以使用ES6箭头函数作为引用组件实例的词汇。

所以代替：

var selectRowProp = { mode: "radio", clickToSelect: true, bgColor: "#A7EC57", onSelect: onRowSelect }; function onRowSelect(row, isSelected){ this.showRow(row, isSelected); }

你应该能够做到这一点：

var selectRowProp = { mode: "radio", clickToSelect: true, bgColor: "#A7EC57", onSelect: (row, isSelected) => this.showRow(row, isSelected) };

或者甚至只是简单的以下内容，因为您已经将showRow绑定到构造函数中的组件上下文：

var selectRowProp = { mode: "radio", clickToSelect: true, bgColor: "#A7EC57", onSelect: this.showRow };

以下是JavaScript中如何工作的更多内容： https ： //developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this

The problem is that this within onRowSelect is not the instance of the component like you are expecting.

You can use an ES6 arrow function for a lexical this that will reference the component instance.

So instead of:

var selectRowProp = { mode: "radio", clickToSelect: true, bgColor: "#A7EC57", onSelect: onRowSelect }; function onRowSelect(row, isSelected){ this.showRow(row, isSelected); }

You should be able to do this:

var selectRowProp = { mode: "radio", clickToSelect: true, bgColor: "#A7EC57", onSelect: (row, isSelected) => this.showRow(row, isSelected) };

Or even simply the following as you have already bound showRow to the components context in the constructor :

var selectRowProp = { mode: "radio", clickToSelect: true, bgColor: "#A7EC57", onSelect: this.showRow };

Here is a bit more of an expanation of how this works in JavaScript: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this

更多推荐