0

изучаю по немногу React, пытаюсь решать как задачи из примеров, так и придумываю их сам себе, захотелось получить список, в котором можно переходить от одной позиции к другой нажимая на кнопку. При этом, чтоб к выбранной позиции добавлялся класс 'active', как реализовать это на React?

  • получается сделать список,
  • менять на кнопке класс и надпись,

    Не получается:

  • добавлять для позиции из списка новый клас после нажатия кнопки,
  • реализовать переход по списку

Код:

  let games = {
      name: 'tanks',
      list: [
          'Panther',
          'Ferdinand',
          'Tigr',
          'T 34',
          'T 34-85'
      ]
  };


  class Li extends React.Component {
      render() {
          return (
              <li>{this.props.position}</li>
          );
      };
  }


  class Hello extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              class: 'off', 
              label: 'Hello', 
              newClass: 'passive'
          };
      };

    click = () => {
        let colorBtn = (this.state.class === 'off') ? 'on' : 'off';
        let labelBtn = (this.state.label === 'Hello') ? 'Goodbye' : 'Hello';
        let classList = (this.state.newClass === 'passive') ? 'active' : 
 'passive';
        this.setState({
            class: colorBtn,
            label: labelBtn,
            className: classList
        });
    };

    render() {
        return (
            <div>
                <button className={this.state.class} onClick={this.click}> 
                    {this.state.label}
                </button>
                <ul>
                    {this.props.listgame.list.map(function (item, i ) {
                        return <Li  key={i} position={item}/>
                    })}
                </ul>
            </div>
        )
    }
}

ReactDOM.render(
    <Hello listgame={games}/>,
    document.getElementById('app')
);

Спасибо большое за помощь начинающим!

2
  • Как определяется "выбранная позиция"? Какому элементу надо сменить класс при нажатии кнопки? 23 авг 2018 в 12:54
  • Добрый день Дмитрий, хочу сделать следующий сценарий, чтоб после нажатия кнопки добавлялся клас 'active' к 1 элементу из массива list, при следующем нажатии в класс 'active' переходил на вторую позицию по списку.. Пока не придумал как это реализовать 24 авг 2018 в 6:36

1 ответ 1

0

Вам нужно инкрементить позицию выделенного элемента и обнулять её если дошли до конца массива. А в компоненте элемента списка выбирать стиль в зависимости от свойства active (true|false).

class Li extends React.Component {
    render() {
        return (
            <li 
                className={this.props.active ? 'active' : ''}
            >
                {this.props.position}
            </li>
        );
    };
}

class Hello extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            class: 'off', 
            label: 'Hello', 
            newClass: 'passive',
            activeGame: 0
        };
    };

    click = () => {
        let next = this.state;
        next.activeGame++;

        if(this.props.listgame.list.length <= next.activeGame) {
            next.activeGame = 0;
        }

        next.class = (this.state.class === 'off') ? 'on' : 'off';
        next.label = (this.state.label === 'Hello') ? 'Goodbye' : 'Hello';
        next.className = (this.state.newClass === 'passive') ? 'active' : 
 'passive';

        this.setState(next);
    };

    render() {
        return (
            <div>
                <button className={this.state.class} onClick={this.click}> 
                    {this.state.label}
                </button>
                <ul>
                    {this.props.listgame.list.map(function (item, i ) {
                        return <Li  
                            key={i} 
                            position={item}
                            active={this.state.activeGame === i}
                        />
                    })}
                </ul>
            </div>
        )
    }
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.