Question

我有一个素材UI表组件，我添加了一个结帐按钮。一切都很好，除了我不理解的两件事：

当onClick初始化handleCheckout()函数时，为什么会handleRowSelection()和isSelected()被解雇？

最重要的是，当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) => {

此处“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>
    )
}
}

Answer 1

在super（）;之后的构造函数中，还绑定方法：

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

React - onClick丢失了“这个”

1 个答案: