Javascript 反应-单击“丢失”；这"；

我有一个材质UI表组件，并添加了一个签出按钮。 一切正常，除了两件我不明白的事情：

当

onClick

初始化

handleCheckout（）

函数时，为什么还会激发

handleRowSelection（）

和

isSelected（）

最重要的是，当

onClick

调用

handleCheckout（）

时，它会丢失

this

的上下文，并向我显示

this.state.selected是[]

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) => {

此处的“this”将丢失，并且它不会显示选定对象的更新状态

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

console.log（this.state.selected）；
};
HandlerRowsElection=（selectedRows）=>{
这是我的国家({
已选择：selectedRows，
}，函数（）{
});
};
render（）{
返回(
阿尔特币名
现在的
价值
利润销售订单
亏损卖出单
日期和
时间
评论
{this.state.tableData.map（（行，索引）=>(
{row.coin_name}
{row.coin_value}
{row.profitSellOrder}
{row.lossellorder}
{row.ptime}
//评论
{row.lossellorder}
))}
)
}
}

在super（）之后的构造函数中；，还要绑定以下方法：

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

---

在super（）之后的构造函数中；，还要绑定以下方法：

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

---

您能描述一下如何操作的场景吗？表组件有一个复选框和一个属性“onRowSelection”，每当标记复选框时，该属性都会激发handleRowSelection（）。处理程序更新选定的状态数组。当用户点击一个签出按钮时，我试图获取所有选中的复选框，但没有成功。这正是该函数应该如何工作的。你的意思是什么？你能描述一个如何操作的场景吗？表组件有一个复选框和一个属性“onRowSelection”，它在每次标记复选框时都会激发HandlerRowSelection（）。处理程序更新选定的状态数组。当用户点击结帐按钮时，我试图取回所有选中的复选框，但没有成功。这正是该功能的工作原理。你的意思是什么？这个建议并不能解决问题：/I我已经用箭头功能实现了这一点。这是正确的方法@toni michel-caubet@Kejt我解释（为什么），不要重复这个句子。。哈哈，不管怎样，谢谢你，我确实详细说明了，但是这个建议并不能解决问题：/我已经用箭头函数实现了。这是正确的方法@toni michel-caubet@Kejt我想解释一下（为什么），不要重复这个句子。。哈哈，不管怎样，谢谢你，我确实做了详细的阐述，但创作者删除了这篇文章