Переключить логическое состояние на реакцию - PullRequest
Новая
       15

Переключить логическое состояние на реакцию

0 голосов
/ 11 июля 2019

Я чувствую, что сделал все правильно, но состояние не переключается.Мое состояние не меняется на true, когда флажок установлен.

export default class Room extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
           isChecked: false
        };

        this.toggleChecked = this.toggleChecked.bind(this);
    }

 toggleChecked() {
        this.setState({ isChecked: !this.state.isChecked });
    }

 selectAllRooms(){
        if(this.state.isChecked === true){
           //do smth; 
        }else{
           //do smth;
    }

render() {
    return (
       <Modal.Footer>
            <Checkbox onChange={this.toggleChecked}> Select All Rooms </Checkbox>
       <Modal.Footer> 
  )
 }
)

Ответы [ 2 ]

1 голос
/ 11 июля 2019

В состоянии реакции обновления могут быть асинхронными, если вы хотите получить доступ к предыдущим значениям, вы должны сделать это следующим образом: 

toggleChecked() {
    this.setState(prevState => ({ isChecked: !prevState.isChecked }));
}

Когда вы передаете функцию методу setState, первый аргумент ссылается на предыдущее состояние, а второй - на предыдущий реквизит.

Документы: https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

0 голосов
/ 11 июля 2019

Это мой первый раз при переполнении стека, у меня есть флажок в одном из моих проектов, и вот как я его обработал: 

state = { 
    active: false
}

handleCheckboxInput = e => {
    const value = e.target.type === "checkbox" ? e.target.checked : e.target.value;
    this.setState({ [e.target.name]: value });
};

<input
    type="checkbox"
    checked={this.state.active}
    name="active"
    onChange={this.handleCheckboxInput}
/>

Надеюсь, это как-то поможет!

Вот базовое кодовое окно, если вы хотите увидеть, как оно ведет себя: https://codesandbox.io/s/magical-leftpad-o6xbj?fontsize=14

...