Я хотел бы спросить, почему мое состояние не меняется, когда я делаю событие 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
Если вы хотите отслеживать состояние, обновление или нет, то другой способ сделать то же самое:
_stateUpdated(){
console.log(this.state. boardAddModalShow);
}
openAddBoardModal(){
this.setState(
{boardAddModalShow: true},
this._stateUpdated.bind(this)
);
}
Таким образом вы можете вызывать метод «_stateUpdated» каждый раз, когда вы пытаетесь обновить состояние для отладки.
setState принимает обратный вызов. К счастью !! Здесь мы обновляем состояние.
this.setState(
{ name: "Mustkeom" },
() => {
console.log(this.state.name) // Mustkeom
}
);
Итак, когда срабатывает обратный вызов, this.state является обновленным состоянием. Вы можете получить измененные / обновленные данные в обратном вызове.