Когда у меня есть класс кнопки с именем «DrawButton», это имеет этот рендер

render() {
    return(
        <Button
            onClick={this.props.toggleDraw.bind(this)}
            style={{
                backgroundColor: this.props.drawMode ? 'red' : 'blue'
            }}
        >
            Draw
        </Button>
    );
}

А в родительском App.js состояние определяется

state = {
        drawMode: false
}

и есть функция обработчика

toggleDraw = (e) => {
    console.log('App.js drawMode:' + this.state.drawMode);
    this.setState({
        drawMode: !this.state.drawMode
    });
    console.log('App.js drawMode:' + this.state.drawMode);
}

И наконец кнопка:

render() {
  return (
    <div className="App">
        <DrawButton 
            toggleDraw={this.toggleDraw} 
            drawMode={this.state.drawMode}
        />
    </div>
  );
}

Состояние не обновляется должным образом. Это выводит следующее:

Сначала нажмите на кнопку

App.js drawMode:false
App.js:27
App.js drawMode:false
App.js:31

До запуска setState drawMode имеет значение false после запуска setState, drawMode по-прежнему false.

Но кнопка все равно получает красный фон.

Второй клик по кнопке:

App.js drawMode:true
App.js:22
App.js drawMode:true
App.js:26

Но кнопка снова синяя, несмотря на то, что drawMode в состоянии установлено в true.

Почему происходит это несоответствие?

-2
bxyify

1 ответ

Во-первых, ваш bind использовался неправильно, в вашем обработчике on-code DrawButton onClick просто вызовите this.props.toggleDraw . Этот код: this.props.toggleDraw.bind (this) должен находиться в конструкторе файла App.js .

Во-вторых, не используйте console.log для проверки значения состояния после установки, поскольку функция setState работает асинхронно, используйте обратный вызов setState для проверьте значение после настройки:

toggleDraw = (e) => {
    console.log('App.js drawMode:' + this.state.drawMode);
    this.setState(
        { drawMode: !this.state.drawMode },
        () => console.log('App.js drawMode:' + this.state.drawMode)
    ),
}
58584829