Использование setState для переключения свертывания и расширения строки - PullRequest
Новая
       6

Использование setState для переключения свертывания и расширения строки

0 голосов
/ 28 января 2019

Я знаю, что этот вопрос задавался миллион раз, но все ответы одинаковы и по какой-то причине у меня не работают.Я уверен, что у кого-то уже есть хорошее решение для этого, поскольку это так часто встречается.

У меня есть простая функция рендеринга, которая выполняет 

return(
            <div>
                <p className="profile-category" onClick={this.handleOnClick}>{this.props.title}:<Glyphicon glyph={opened ? "menu-up" : "menu-down"}/></p>
                <Collapse in={opened}>
                    <div>
                        <p>some components that are not important</p>
                    </div>
                </Collapse>
            </div>
        )

, и у меня есть функция handleOnClick как

  handleOnClick() {
    console.log('previous open: ', this.state.open)

    this.setState((prevState, props) => ({
        open: !this.state.open
    }), console.log('new state for open: ', this.state.open));

это всего лишь одна итерация того, что я пробовал.Я также попробовал open: !prevState.open, и встроенный setState, как onClick={this.setState({open: !this.state.open})}

Переключатель в <p> работает просто отлично, но <Collapse> не имеет состояния в актуальном состоянии.Я знаю, что setState является асинхронным, но обратный вызов (console.log) должен решить эту проблему, нет?

В конечном счете, как я могу убедиться, что состояние в <Collapse> обновлено?

РЕДАКТИРОВАТЬ:

Оказывается, у меня установлен bootstrap 4, который не поддерживает response-bootstrap.проверьте файл package.json, чтобы убедиться, что версия начальной загрузки - 3.

Ответы [ 2 ]

0 голосов
/ 28 января 2019

Несколько вещей может пойти не так в вашем случае.Сначала убедитесь, что ваша функция связана с вашим классом, или используйте функцию стрелки.

Затем вы используете версию обратного вызова функции setState, но не используете предыдущее состояние: 

handleOnClick = event => {
    this.setState(prevState => ({ open: !prevState.open }))
}

И если вы хотите, чтобы ваш console.log распечатывал правильное обновленное значение, вам нужно будет ввести функцию, а не выполнять ее напрямую, поскольку второй аргумент setState является обратным вызовом: 

handleOnClick = event => {
    this.setState(
        prevState => ({ open: !prevState.open }),
        () => { console.log(this.state.open) }
    )
}
0 голосов
/ 28 января 2019

Убедитесь, что вы инициализируете open in state (конструктор), после этого попробуйте изменить функцию handleOnClick следующим образом: 

 onClick={() => this.setState({ open: !this.state.open })}
...