从 Render 内部调用 React 函数

Question

我将此 table component 与单选框（行选择（单））一起使用，我想将反应状态更新为当前选定的行。

名为 onRowSelect 的函数显示所选行。为了将状态更新为所选行，我创建了一个名为 showRow() 的函数，该函数在 onRowSelect 中调用。但是，我不断收到 this.showRow() is not a function 错误。

我在渲染函数外使用 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>
    )
  }
}

Answer 1

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

您可以对将引用组件实例的词法 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
};

以下是 this 在 JavaScript 中的工作原理的更多解释：https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this

从 Render 内部调用 React 函数

Call a React Function from inside Render

render

function

reactjs