Объединение нескольких состояний реакции в одну переменную - PullRequest
Новая
       1

Объединение нескольких состояний реакции в одну переменную

0 голосов
/ 27 мая 2020

Я работаю над проектом в React, где я могу скрыть / показать несколько элементов на экране с помощью useState хука.

пример 

  const [nameLabel, setNameLabel] = useState(true);
  const [numberLabel, numberLabel] = useState(true);
  const [departure, setDeparture] = useState(true);
  const [arrival, setArrival] = useState(true);

У меня около 20 эти логические значения, но теперь я хочу создать одну переменную, чтобы я мог показать или скрыть все эти логические значения сразу.

Можно ли объединить все это в одну переменную, которую я могу вызвать, чтобы показать или скрыть все элементы сразу?

Ответы [ 2 ]

2 голосов
/ 27 мая 2020

Вы можете создать объект со своими логическими значениями и обновить единственный ключ. Что-то вроде 

const [data, setData] = useState({
  nameLabel: true,
  numberLabel: true,
  departure: true,
  arrival: true
});

Call setData 

setData({ ...data, nameLabel: false })

Ссылка codeandbox

1 голос
/ 27 мая 2020

Если я правильно понимаю ваш вопрос, я думаю, вам лучше использовать функцию для переключения их всех сразу (дополнительное состояние all не является обязательным. Вы можете использовать любой logi c, который хотите, я только что использовал это поможет проиллюстрировать).

Это позволяет вам сохранять независимость, как и раньше, но с помощью вспомогательной функции для обновления всех сразу. 

const {useState} = React;

const Example = () => {
  const [all, toggle] = useState(false);
  
  const [nameLabel, setNameLabel] = useState(true);
  const [numberLabel, setNumberLabel] = useState(true);
  const [departure, setDeparture] = useState(true);
  const [arrival, setArrival] = useState(true);
  
  const toggleAll = (bool) => {
    setNameLabel(bool);
    setNumberLabel(bool);
    setDeparture(bool);
    setArrival(bool);
    
    toggle(!bool);
  }
   
  return (
    <div>
      <div>
        <button onClick={() => toggleAll(all)}>Toggle All</button>
      </div>
      <div>
        <button onClick={() => setNameLabel(!nameLabel)}>Name: {nameLabel.toString()}</button>
      </div>
      <div>
        <button onClick={() => setNumberLabel(!numberLabel)}>Number: {numberLabel.toString()}</button>
      </div>
      <div>
        <button onClick={() => setDeparture(!departure)}>Departure: {departure.toString()}</button>
      </div>
      <div>
        <button onClick={() => setArrival(!arrival)}>Arrival: {arrival.toString()}</button>
      </div>
    </div>
  );
}

ReactDOM.render(<Example />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>
...