レンダリング内部からのリアクション関数の呼び出し

Question

私はこのtable componentをラジオボックスで使用しています（行選択（シングル））、現在選択されている行に反応状態を更新したいとします。

という関数onRowSelectは、選択された行を示します。状態を選択した行に更新するには、というshowRow（）という関数を作成しました。これはonRowSelectで呼び出されます。しかし、私はthis.showRow（）関数エラーではありません取得し続けます。

現在選択されている行で状態を更新する必要があるため、私はrender関数の外で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: (row, isSelected) => this.showRow(row, isSelected) 
}; 

、あるいは単にあなたがすでにコンストラクタ内のコンポーネントのコンテキストにshowRowを結合したとして、以下：

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: this.showRow 
}; 

ここでもう少し詳しく説明します。thisはJavaScriptで動作します：https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this