陣營 - 的onClick丟失「這個」

Question

我有一個材料UI表分量，並且我添加結帳按鈕。 一切工作正常，除了兩件事情我不明白：

當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);