Изменение коллекции, используемой для отображения в React - PullRequest
0 голосов
/ 03 марта 2019

У меня есть приложение реагирования, которое выбирает продукты из файла json, я добавил две кнопки в верхней части страницы, чтобы каждая из них отображала данные из своего состояния json.

, так что есть состояние menu1, меню 2 и активный список, я сделал 2 функции как

  Active1() {
    this.setState({ activelist: !this.state.items });
  }

  Active2() {
    this.setState({ activelist: !this.state.items2 });
  }

и кнопки, которые их переключают,

   <button className="changebutton" onClick={this.Active1}>
            Menu 1
          </button>
          <button className="changebutton" onClick={this.Active2}>
            Menu2
          </button>

, и этопри щелчке будет отображаться активный список, который представляет собой меню1 и меню2, но он не работает.

имя файла Itemlist.js

https://codesandbox.io/embed/4jox1kq20x?fontsize=14 (выможет захотеть нажать на кнопку обновления в песочнице)

1 Ответ

0 голосов
/ 03 марта 2019

Создайте третий массив (возможно, activeList.) Затем просто нажмите на кнопку вызова функции, которая копирует items или items2 в activeList.Наконец, замените все ссылки на items в методе рендеринга на activeList.Вот сокращенный код:

class ItemList extends React.Component {
  state = {
...
    items: [],
    items2: [],
    activelist: [],
  };

  componentDidMount() {
    dataPromise.then(
      result => {
        this.setState({
          isLoaded: true,
          items: result,
          activelist: result
        });
      },
...
    );

    dataPromise2.then(
      result2 => {
        this.setState({
          isLoaded: true,
          items2: result2
        });
      },
...
    );
  }

  constructor(props) {
    super(props);
...
    this.Active1 = this.Active1.bind(this); // ADDED
    this.Active2 = this.Active2.bind(this); // ADDED
  }
...
  Active1() {
    this.setState({ activelist: Object.assign({}, this.state.items) }); //CHANGED
  }

  Active2() {
    this.setState({ activelist: Object.assign({}, this.state.items2) }); //CHANGED
  }

  render() {
...
      return (
        <div>
          <button className="changebutton" onClick={this.Active1}>
            Menu 1
          </button>
          <button className="changebutton" onClick={this.Active2}>
            Menu2
          </button>
...
      );
    }
  }
}

Вот код и окно: https://codesandbox.io/s/jn6vp0qx4y?fontsize=14

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...