从Render中调用React函数 [英] Call a React Function from inside Render

问题描述

我将这个表格组件与放射性盒一起使用（行选择（Single）），我希望将反应状态更新为当前选定的行。

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

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

  class ChooseRowExample extends组件{
构造函数（道具）{
 super（道具）; 
 this.state =（{
 chosenRow：
}）; 
 this.showRow = this.showRow.bind（this）; 
} 
 
 showRow（row，isSelected）{
 console.log（row）; 
 //在此更新状态
} 
 
 
 render（）{
 
 var selectRowProp = {
 mode：radio ，
 clickToSelect：true，
 bgColor：＃A7EC57，
 onSelect：onRowSelect 
}; 
 
函数onRowSelect（row，isSelected）{
 this.showRow（row，isSelected）; 
} 
 
 
 return（
< div> 
< BootstrapTable data = {person} search = {true} selectRow = {selectRowProp}> ; 
< TableHeaderColumn dataField =idisKey = {true}>客户端＃< / TableHeaderColumn> 
< TableHeaderColumn dataField =name>公司< / TableHeaderColumn> 
 < TableHeaderColumn dataField =contact_name>客户端名称< / TableHeaderColumn> 
< / BootstrapTable> 
< / div> 
）
} 
} 
  

解决方案

问题在于 this onRowSelect 不是组件的实例，就像你期待的那样。

你可以使用ES6箭头函数来引用组件实例的词法 this 。

p>

  var selectRowProp = {
 mode：radio，
 clickToSelect：true，
 bgColor：＃A7EC57，
 onSelect：onRowSelect 
}; 
 
函数onRowSelect（row，isSelected）{
 this.showRow（row，isSelected）; 
} 
  

您应该可以这样做：

  var selectRowProp = {
 mode：radio，
 clickToSelect：true，
 bgColor：＃A7EC57，
 onSelect :(行，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


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>
    )
  }
}

解决方案

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

这篇关于从Render中调用React函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！