переключить активное состояние с помощью крючков реагировать - PullRequest
Новая
       18

переключить активное состояние с помощью крючков реагировать

0 голосов
/ 10 января 2019

Я использую React-хуки и столкнулся с чем-то, что я не уверен, как это сделать.

У меня есть родительский компонент, который отображает список городов. 

const Cities = ({ cities = ["London", "Barcelona", "Los Angeles", "New York"] }) => {
  return (
    <>
      {cities.map(city => {
        const [isActive, setActive] = useState(false);
        return <p onClick={() => setActive(true)} style={{ color: isActive ? "red" : "green" }}>{city}</p>;
      })}
    </>
  );
};

проблема, с которой я сталкиваюсь, заключается в том, что каждый раз, когда я нажимаю на город, он превращается в red, однако я хочу, чтобы только один из них был красным в любой момент времени (т. Е. Самый последний нажатый).

Если с этим вопросом что-то неясно, пожалуйста, дайте мне знать.

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

См. Код песочницы здесь .

Ответы [ 2 ]

0 голосов
/ 10 января 2019

Если только один город может быть красным, вы не должны использовать зацепку внутри цикла (то, чего на самом деле вы никогда не должны делать), но держать одно активное состояние над рендерингом, что-то вроде: 

const App = ({ cities = ["London", "Manchester", "Leeds"] }) => {
  const [active, setActive] = useState(false)

  const City = ({ name }) => (
    <p
      onClick={ () => setActive(name) }
      style={{ color: active === name ? "red" : "green" }}
    >
      { name }
    </p>
  )

  return (
    <>
      { cities.map(city => <City name={ city } />) }
    </>
  );
};

Мои рабочие коды и коробку вы можете найти здесь: https://codesandbox.io/s/o58342l64z

Я также взял на себя смелость немного переформулировать для личной ясности.

0 голосов
/ 10 января 2019

Если за один раз можно выбрать только один город, вам не требуется указывать для каждого из них значение состояния. Просто сохраните текущий выбранный атрибут в единственном атрибуте состояния: 

const Cities = ({ cities = ["London", "Barcelona", "Los Angeles", "New York", "Wigan"] }) => {
    const [activeCity, setCity] = useState(null);

    return (
        <>
            {cities.map(city => <p key={city} onClick={() => { setCity(city) }} style={{ color: activeCity === city ? "red" : "green" }}>{city}</p>)}
        </>
    );
};
...