Как на React сделать вертикальное меню с выделением элемента меню?

Question

[uuushka]

Добрый день. Новичок в реакте, поэтому надеюсь на ваши советы
Что я имею ввиду:
получил массив, нарисовал по нему меню

render() {
    return (
        <ul className="nav nav-pills nav-stacked ">
            {this.props.itemList.map(
                function (item) {
                    return <MenuItem item={item}  />
                }
            )}
        </ul>
    )
};

Надо, чтобы при нажатии на элемент меню он выделялся другим цветом. Это все получилось сделать. Но как сделать так, чтобы при нажатии на другой элемент это выделение снималось и появилось на другом элементе?

Answer 1

[Никита Гущин]

Надо, чтобы при нажатии на элемент меню он выделялся другим цветом. Это все получилось сделать.

Странно, что одно работает, а другое - нет. Механизм ведь один и тот-же. Простейшая реализация предполагает сохранение выбранного элемента меню в state:

class MyMenu extends React.Component {

  constructor(props) {
    super(props);
    this.handleItemClick = this.handleItemClick.bind(this);
    this.state = { selectedItem: null };
  }

  handleItemClick(selectedItem) {
    console.log('handleItemClick', selectedItem);
    this.setState({ selectedItem });
  }

  render() {
    const { items } = this.props;
    const { selectedItem } = this.state;
    const { handleItemClick } = this;

    return (
      <ul>
        { items.map( (item, key) => (
            <MenuItem
                key={key}
                item={item}
                isActive={item === selectedItem}
                onClick={handleItemClick}
             />
        )) }
      </ul>
    );
  }
}

И, соответственно, в самом компоненте MenuItem проверяем - если флаг isActive === true, то добавляем класс или еще чего:
Рабочий пример

Comments

[uuushka]

спасибо! моя главная ошибка, что я не менял state в родителе... косяк..

Answer 2

[Алексей Зуев]

jsfiddle.net/yurzui/1gfu213e/