Задать вопрос
BaronSmile

Baron Smile

New
Лайки

  • Как сделать что бы при чеке определённый input появлялся и исчезал?

    0xD34F
    @0xD34F Куратор тега React
    Массив выбранных значений у вас есть - вот на его основе и создавайте input'ы:

    <div className={css.inputList}>
  {checkedList.map(n => (
    <div className={css.field} key={n}>
      <p>{n}:</p>
      <Input />
    </div>
  ))}
</div>
    Ответ написан
    Комментировать
    Комментировать

  • Как создать на React корзину?

    KaizDA
    @KaizDA
    Вообще, вопрос вы задали достаточно интересный. Однако проблема в том, что ответ на него достаточно массивный, если конечно отвечать полностью.

    Потому, к сожалению, придётся немного сократить.

    Представим, у вас есть небольшой магазин, где присутствует несколько товаров. Например, это будут простые телефоны. Структура одного товара довольно простая: картинка, название, описание и кнопка купить.
    Под капотом всё обстоит немного иначе. У нас будет массив, внутри которого есть объекты с данными. В объект будет входить: название продукта, описание продукта, картинка на продукт и уникальный идентификатор. Пример одного объекта будет немного ниже.

    {
  id: 0,
  name: "Nokia 3310",
  description: "Телефон, переживший падение в жерло вулкана",
  url: "https://static.shiftdelete.net/wp-content/uploads/2018/05/nokia-3310-1-milyon-volt-yuke-dayandi-sdn-01.jpg",
  price: 2800
}


    Поскольку React приложения являются одностраничными, потому-то и называются SPA, что в переводе на нормальный “single page application”. У нас будет несколько страниц: первая страница с продуктами, где можно приобрести какой-то товар, а вторая страница — это простая корзина.

    Думаю, с роутингом проблем не должно возникнуть. Однако, если те возникнут, можете посмотреть это видео. На английском, на русском.

    Теперь определимся.

    При нажатии на кнопку «Купить» должно произойти действие. Продукт, который мы купили должен попасть в корзину, а при переключении на страницу корзины показываться на странице. Возникает вопрос, как это сделать?

    Ответ довольно простой: создать пустой массив, в который мы и будем скандировать все купленные продукты. И именно данный массив и будет отображаться на странице корзины. Объект купленного продукта будет, например, таким. 

    {
  id: 0,
  name: "Nokia 3310",
  description: "Телефон, переживший падение в жерло вулкана",
  url: "https://static.shiftdelete.net/wp-content/uploads/2018/05/nokia-3310-1-milyon-volt-yuke-dayandi-sdn-01.jpg",
  price: 2800,
  count: 1
}


    На странице у нас будет несколько кнопок. Первая отвечает за удивление продукта из корзины, вторая за добавление ещё одного товара, и последняя за удаление одного товара. При каждом нажатии, мы будет обращаться к массиву с объектами и искать нужный элемент. Если он есть, то при покупке, изменять его count, добавляя один. Как это будет происходить?

    Расскажу про алгоритм добавления элемента в массив:
    1. При нажатии, мы будет получать его идентификатор.
    2. Затем проходимся по массиву через цикл find получаем сам объект.
    3. В конце записываем полученный объект в массив. (P.S. Запомните одно важное правило, поскольку в React или Redux нельзя изменять состояние, использовать push следует крайне осторожно. В данном случае использовать push не стоит, пригодиться spread-оператор).


    Хоть и написал в ответе, продублировать здесь лишним не будет. Утром не смог добавить пример. Однако, исходя из вашего изначального вопроса о магазине, написал простенький пример.

    Скажу сразу, повторение кода в примере сознательное. Если будете делать нечто такое самостоятельно, избегайте повторение кода, поскольку это может повлиять на поддержку приложения. Да и вообще, повторять код не есть хорошо, если тот конечно не сознательно повторённый.

    Сам пример: CodeSandbox (Cart)
    Ответ написан
    8 комментариев
    8 комментариев

  • Как определить дату, отстоящую от другой даты на определённое количество дней?

    0xD34F
    @0xD34F Куратор тега JavaScript 
    const days = 46330;
const date = new Date();
date.setDate(date.getDate() + days);
const dateStr = date.toLocaleDateString('ru-RU', {
  day: 'numeric',
  month: 'short',
  year: 'numeric',
});

console.log(dateStr);
    Ответ написан
    Комментировать
    Комментировать

  • Как определить дату, отстоящую от другой даты на определённое количество дней?

    djQuery
    @djQuery
    "Кодируем помаленьку" ("Сказка о Тройке")))
    Не изобретайте велосипед, он давно уже изобретён.
    Ответ написан
    Комментировать
    Комментировать

  • Как использовать useStore, useSelector, useDispatch hook?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    1. useDispatch - получение функции store.dispatch в компоненте. Раньше для вызова action функциональный компонент приходилось оборачивать в вызов connect:
    const Foo = ({ dispatch }) => {
  const handler = useCallback(() => {
    dispatch(action());
  }, []);

  return (
    <Bar onClick={handler} />
  );
};

export default connect()(Foo);


    Сейчас:
    const Foo = () => {
  const dispatch = useDispatch();

  const handler = useCallback(() => {
    dispatch(action());
  }, []);

  return (
    <Bar onClick={handler} />
  );
};

export default Foo;


    2. useSelector - маппинг значения из store.
    Раньше:
    const Foo = ({ value }) => {
  return (
    <Bar value={value} />
  );
};

const mapStateToProps = state => ({
  value: state.value,
});

export default connect(mapStateToProps)(Foo);


    const Foo = () => {
  const value = useSelector(state => state.value);

  return (
    <Bar value={value} />
  );
};

export default Foo;


    3. useStore - получение store целиком:
    const valueSelector = state => state.value;

const Foo = () => {
  const { dispatch, getState, subscribe } = useStore();
  const value = valueSelector(getState());
  
  useEffect(() => subscribe(console.log), []);

  const handler = useCallback(() => {
    dispatch(action());
  }, []);

  return (
    <Bar onClick={handler} value={value} />
  );
};

export default Foo;

    Вряд ли useStore вам, действительно, понадобится на практике.
    Ответ написан
    Комментировать
    Комментировать

  • Pagination React Material UI?

    Seasle
    @Seasle Куратор тега React 
    - const changePage = (page) => {
+ const changePage = (event, page) => {
    dispatch(fetchArticles(page));
};

    API
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать правильную логику фильтра чекбокса?

    0xD34F
    @0xD34F Куратор тега React
    Да уже всё сделано. Надо только лишнее вырезать. Зачем компонент SidebarItem что-то тянет из redux'а? Не надо. Его задача - показать чекбокс в указанном состоянии, установить переданный из родителя обработчик события. Всё:

    export default ({ filter, checked, onChange, children }) => (
  <div>
    <label>
      <input
        type="checkbox"
        name={filter}
        onChange={() => onChange(filter)}
        checked={checked}
      />
      {children}
    </label>
  </div>
);
    Ответ написан
    Комментировать
    Комментировать

  • Input не выводится текст?

    tyllo
    @tyllo
    Frontend
    Вот так можно
    Ответ написан
    Комментировать
    Комментировать

  • Работа с методоми внутри class?

    Kozack
    @Kozack Куратор тега JavaScript
    Thinking about a11y 
    async getTickets(searchId) {
    searchId ||= await this.getSearchID()
    const res = await this.getResource(`/tickets?searchId=${searchId}`);
    return res.tickets.map(this.transformTicket);
  }
    Ответ написан
    1 комментарий
    1 комментарий