Выбор и хранение DIV на ReactJ

Question

У меня есть приложение, в котором вы выбираете некоторые продукты (DIVS), которые изменяют цвет границы (в зависимости от состояния).Я хотел бы знать, как я могу сохранить эти действия onClick, чтобы, когда люди нажимают на другую ссылку и возвращаются, выбираются те же самые DIV?

Я знаю, что могу использовать файлы cookie или сеансы, но как определитьнапример, каждый DIV на React и сделать их автоматический выбор после обновления страницы?Как вы, ребята, справляетесь с этим?Спасибо.

Answer 1

По вашему вопросу звучит так, что у вас

• есть некоторые продукты на вашей странице, которые вы представляете как <div> элементы
• меняют свою границу при клике
• хочет, чтобы они отображались как выбранные, когда пользователь обновляет страницу

Реагирует на представление некоторых данных, но не решает, как вы получите эти данные на страницу.Похоже, вы хотите сохранить список продуктов, выбранных , где-нибудь, а затем снова загрузить этот список на страницу, когда пользователь обновится.API Web Storage может быть полезен, но куки и сеансы могут делать то же самое.

Вам необходимо

• выбрать, что хранить (возможно, списокидентификаторов продуктов)
• выберите, где его хранить (localStorage, cookie, сервер или, возможно, в URL с https://reach.tech/router)
• при загрузке страницы реакции (componentDidMount для какого-либо компонента)прочитайте список из localalstorage в вашем штате
• сопоставьте ваш список «выбранных продуктов» с вашими отдельными продуктами в render

Итак, если вы загрузили список изодна из опций хранения в вашем состоянии - selectedProductIds, а список продуктов - products

isSelected = (product) => {
   this.state.selectedProductIds.includes(product.id)
}

render() {
  return <section>
    { this.state.products.map((product) =>
        <div className={this.isSelected(product) ? 'selected item' : 'item'}>
           {product.name}
        </div>
    )}
  </section>
}

. Синхронизация состояния React с каким-либо другим механизмом хранения может стать довольно грязной.

Answer 2

В порядке предпочтения я бы использовал:

1) Если вы используете реакцию 16.3 или выше, используйте api context context 2) Если вы не используете 16.3 или выше, вы можете использовать библиотеку, такую ​​как reduxили поток 3) вы можете использовать локальное хранилище HTML.

Вот дополнительная информация о Redux vs context api:
https://daveceddia.com/context-api-vs-redux/

Веб-хранилище наименее желательно, потому что оно неприменять любые правила управления состоянием, как и другие варианты.

Answer 3

Вот пример с локальным хранилищем:

import React from 'react';

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = { list: null };
  }

  onSearch = (e) => {
    e.preventDefault();

    const { value } = this.input;

    if (value === '') {
      return;
    }

    const cached = localStorage.getItem(value);
    if (cached) {
      this.setState({ list: JSON.parse(cached) });
      return;
    }

    fetch('https://search?query=' + value)
      .then(response => response.json())
      .then(result => {
        localStorage.setItem(value, JSON.stringify(result.list));
        this.setState({ list: result.list });
      });

  }

  render() {
    return (
      <div>

        <form type="submit" onSubmit={this.onSearch}>
          <input type="text" ref={node => this.input = node} />
          <button type="button">Search</button>
        </form>

        {
          this.state.list &&
          this.state.list.map(item => <div key={item.objectID}>{item.title}</div>)
        }
      </div>
  }

}

Answer 4

Если вы хотите сохранить состояние после перезагрузки, вы можете взглянуть на HTML Web Storage.