我想问为什么在执行onclick事件时状态没有变化。我已经搜索了一段时间,我需要在构造函数中绑定onclick函数,但状态仍未更新。这是我的代码:
import React from 'react'; import Grid from 'react-bootstrap/lib/Grid'; import Row from 'react-bootstrap/lib/Row'; import Col from 'react-bootstrap/lib/Col'; import BoardAddModal from 'components/board/BoardAddModal.jsx'; import style from 'styles/boarditem.css'; class BoardAdd extends React.Component { constructor(props){ super(props); this.state = { boardAddModalShow: false } this.openAddBoardModal = this.openAddBoardModal.bind(this); } openAddBoardModal(){ this.setState({ boardAddModalShow: true }); // After setting a new state it still return a false value console.log(this.state.boardAddModalShow); } render() { return ( <Col lg={3}> <a href="javascript:;" className={style.boardItemAdd} onClick={this.openAddBoardModal}> <div className={[style.boardItemContainer,style.boardItemGray].join(' ')}> Create New Board </div> </a> </Col> ) } } export default BoardAdd
这个回调真的很混乱。只需使用async await代替:
async openAddBoardModal(){ await this.setState({ boardAddModalShow: true }); console.log(this.state.boardAddModalShow); }