Создание связываемого массива в компоненте функции - PullRequest
1 голос
/ 08 января 2020

Я пытаюсь сделать компонент, где вы можете нажать на некоторые кнопки, и тогда кнопка становится активной. Я очень новичок в REACT, но AFAIK, если вы хотите использовать переменные в методе рендеринга, вам нужно применить переменную в качестве хуков с помощью useState. И я думаю, что здесь я go не прав. Приведенный ниже код не обновляет активный атрибут на кнопке при нажатии только при загрузке. В angular мы просто изменили бы свойство в массиве, как мне добиться этого с помощью REACT?

import React, { useState, useEffect, useRef } from "react";
import { Button, ButtonGroup } from "reactstrap";

const TimeBar = props => {
  const buttons = [
    { id: 1, title: "10 min", minutes: 10, isActive: true },
    { id: 2, title: "1 hour", minutes: 60, isActive: false },
    { id: 3, title: "6 hours", minutes: 360, isActive: false },
    { id: 4, title: "12 hours", minutes: 720, isActive: false },
    { id: 5, title: "24 hours", minutes: 1440, isActive: false }
  ];

  function clicked(button) {
    button.isActive = true;
    alert(button.minutes);
  }

  return (
    <ButtonGroup>
      {buttons.map(button => (
        <Button
          key={button.id}
          onClick={() => clicked(button)}
          color="secondary"
          size="sm"
          active={button.isActive}
        >
          {button.title}
        </Button>
      ))}
    </ButtonGroup>
  );
};

export default TimeBar;

1 Ответ

0 голосов
/ 08 января 2020

Вы можете заставить его работать с крючками, используя useState() в данном конкретном случае.

В useState() документации, которую вы можете прочитать далее о том, как используйте также setState(), который вызывается в вашем коде setButtons, и почему вам нужно изменить текущее состояние вместо прямого.

Подобно следующему:

const [buttons, setButtons] = useState([
   { id: 1, title: "10 min", minutes: 10, isActive: true },
   { id: 2, title: "1 hour", minutes: 60, isActive: false },
   { id: 3, title: "6 hours", minutes: 360, isActive: false },
   { id: 4, title: "12 hours", minutes: 720, isActive: false },
   { id: 5, title: "24 hours", minutes: 1440, isActive: false }
]);

const clicked = (button) => {
   setButtons(prevState => {        
       return prevState.map(e => {
           if (e.id === button.id) { e.isActive = true; }
           return e;
       })  
   });
}

Или в clicked событие, вы можете сделать следующее:

const clicked = (button:any) => {
   setButtons((prevState:any) => {        
      const newState = [...prevState];
      newState.find(e => e.id === button.id).isActive = true;
      return newState;
   });
}

Предлагаемая документация для чтения: Справочник по хукам API

Надеюсь, это поможет!

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