React - onClickは "this"を失いました

Question

私は材料UIテーブルコンポーネントを持っており、チェックアウトボタンを追加しました。 すべては、私が理解しない2つのことを除いて、正常に動作します：

onClickはhandleCheckout()機能を初期化するとき、なぜhandleRowSelection()と​​も同様に解雇されましたか？

最も重要なの

、onClickはhandleCheckout()、それは損失thisの文脈を、呼び出し、this.state.selected is []ことを私に示しています。ここで

export default class PredictionsTable extends Component { 

constructor(props) { 
    super(props); 

    this.state = { 
     selected: [], 
     tableData: [], 
     checkout: false 
    } 
} 


componentWillMount(){ 
    axios.get('/dashboard') 
     .then((response) => { 
      this.setState({ 
       tableData: response.data, 
      }); 
     }) 
     .catch((error)=> { 
      console.log(error); 
     }); 
} 

isSelected = (index) => { 
    return this.state.selected.indexOf(index) !== -1; 
}; 

handleCheckout = (event) => { 

は、「これは」失われ、スーパーは（）;,も方法結合した後、それはコンストラクタでは、選択し

console.log(this.state.selected); 
}; 

handleRowSelection = (selectedRows) => { 
    this.setState({ 
      selected: selectedRows, 
     },function(){ 
    }); 
}; 


render() { 
    return (
     <div className="table"> 
      <RaisedButton label="Reveal my Forecasts" onClick={this.handleCheckout} 
          labelStyle={{color: greenA700}} 
          buttonStyle={{borderColor: greenA700}}/> 
      <Table 
       height={"300px"} 
       fixedHeader={true} 
       fixedFooter={false} 
       multiSelectable={true} 
       onRowSelection={this.handleRowSelection} 
      > 
       <TableHeader 
        displaySelectAll={true} 
        adjustForCheckbox={true} 
        enableSelectAll={false} 
       > 
        <TableRow style={{background: '#e9eaea'}}> 
         <TableHeaderColumn colSpan="6" style={{textAlign: 'center' , paddingRight: "90px"}}> 
         </TableHeaderColumn> 
        </TableRow> 
        <TableRow> 
         <TableHeaderColumn tooltip="The forecast coin name">Altcoin Name</TableHeaderColumn> 
         <TableHeaderColumn tooltip="The value of the coin according to forecast time">Current 
          Value</TableHeaderColumn> 
         <TableHeaderColumn tooltip="Upper limit of investment">Profit Sell Order</TableHeaderColumn> 
         <TableHeaderColumn tooltip="Lower limit of investment">Loss Sell Order</TableHeaderColumn> 
         <TableHeaderColumn tooltip="Date and time the forecast was generated">Date and 
          time</TableHeaderColumn> 
         <TableHeaderColumn 
          tooltip="Share information about the forecast">Comments</TableHeaderColumn> 
        </TableRow> 
       </TableHeader> 
       <TableBody 
        showRowHover={true} 
       > 
        {this.state.tableData.map((row, index) => (
         <TableRow key={index} selected={this.isSelected(index)}> 
          <TableRowColumn>{row.coin_name}</TableRowColumn> 
          <TableRowColumn>{row.coin_value}</TableRowColumn> 
          <TableRowColumn style={{paddingLeft: 50}}>{row.profitSellOrder}</TableRowColumn> 
          <TableRowColumn style={{paddingLeft: 50}}>{row.lossSellOrder}</TableRowColumn> 
          <TableRowColumn>{row.ptime}</TableRowColumn> 

          //comments 
          <TableRowColumn>{row.lossSellOrder}</TableRowColumn> 
         </TableRow> 
        ))} 
       </TableBody> 
      </Table> 
     </div> 
    ) 
} 
} 

Answer 1

の更新された状態を示していない。

this.handleCheckout = this.handleCheckout.bind(this); 

を