Блог

Я пытаюсь создать sidemenu, который имеет сворачиваемые параметры.

Ниже приведен мой код:

 export default class CRSideMenu extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fprActive: true
    };
    autoBind(this);
  }

  toggleFPR() {
    console.log('Setting fprActive from ', this.state.fprActive, ' to ', !this.state.fprActive);
    this.setState({
      fprActive: !this.state.fprActive
    });
  }

  render() {
    console.log('render', this.state.fprActive);
    return (
      <ul className='list-group list-group-nav'>
        <li>
          <a 
            href='#' 
            className={classnames('list-group-item', this.state.fprActive amp;amp; 'active', 'has-subnav')}
            onClick={this.toggleFPR} >
            FPR
          </a>
          <ul className='list-group list-group-nav'>
            <li>
              <a href='' className='list-group-item'>FR</a>
            </li>
          </ul>
        </li>
      </ul>
    );
  }
}
  

Когда я распечатал this.state.fprActive в методе render (), я вижу следующее:

• Изменение значения fprActive с true на false
• отображать false
• отображать true

Почему мой fprActive автоматически возвращается к «true», когда я нажимаю только один раз?

На этом этапе я не могу воспроизвести проблему, но симптом говорит о том, что ваша страница обновляется при нажатии на привязку, потому что вы не предотвращаете действие по умолчанию. Есть toggleFPR вызов preventDefault для объекта события, который он получает:

 toggleFPR(event) {
//        ^^^^^ ------------ ***
  event.preventDefault(); // ***
  console.log('Setting fprActive from ', this.state.fprActive, ' to ', !this.state.fprActive);
  this.setState({
    fprActive: !this.state.fprActive
  });
}
  

Отдельно: здесь вы нарушаете одно из фундаментальных правил React:

 console.log('Setting fprActive from ', this.state.fprActive, ' to ', !this.state.fprActive);
this.setState({
  fprActive: !this.state.fprActive
});
  

При настройке состояния на основе существующего состояния вы должны использовать версию обратного вызова, а не версию, в которую вы передаете объект:

 this.setState(({fprActive}) => {
  console.log('Setting fprActive from ', fprActive, ' to ', !fprActive);
  return {fprActive: !fprActive};
});
  

Если вы этого не сделаете, он будет работать большую часть времени и иногда будет давать сбой по труднодиагностируемым причинам.