Question

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

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

Answer 1

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

您可以将ES6箭头函数用于将引用组件实例的词汇this。

所以而不是：

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函数

1 个答案: