Сделайте один true, в то время как другие в объекте имеют значение false в реактивных крючках

#javascript #arrays #reactjs #react-hooks #use-state

#javascript #массивы #reactjs #реагирующие крючки #use-state

Вопрос:

Что лучше всего сделать (вариант 1: true) и в то же время необходимо изменить другое состояние на false

то же самое нужно делать и с другими состояниями (option2,option3 …..)

 const [state, setState] = useState({
        option1: false,
        option2: false,
        option3: false,
        option4: false,
    });

return (
    <div>
        <input
            type="checkbox"
            onClick={() => setState(state => ({ ...state, option1: true }))}
        />

        <input
            type="checkbox"
            onClick={() => setState(state => ({ ...state, option2: true }))}
        />

        <input
            type="checkbox"
            onClick={() => setState(state => ({ ...state, option3: true }))}
        />
    </div>
)

}

1. Почему бы вам не использовать вспомогательную функцию и не привязать ее к click событию флажков. Вы можете передать целевой option объект в качестве параметра функции. Функция запустит цикл и установит значение false для всех, за option исключением того, что для цели option будет установлено значение true.

2. Вы могли бы попробовать выполнить useState({ selectedOption: 0 }); вместе с onClick={() => setState(state => ({ selectedOption: 1 }))} etc и т.д. И если вам нужны 4 логических значения где-то еще, то вы можете получить их из этого единственного значения состояния.

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

Ответ №1:

Если ваше состояние состоит только options из переменных, то

 const initialState = {
        option1: false,
        option2: false,
        option3: false,
        option4: false,
    }
const [state, setState] = useState(initialState);

return (
    <div>
        <input
            type="checkbox"
            onClick={() => setState(state => ({ ...initialState, option1: true }))}
        />

        <input
            type="checkbox"
            onClick={() => setState(state => ({ ...initialState, option2: true }))}
        />

        <input
            type="checkbox"
            onClick={() => setState(state => ({ ...initialState, option3: true }))}
        />
    </div>
)

Ответ №2:

Я писал именно то, что было ответом Пракаша… Кажется, это самый простой способ…

хотя мне нравится писать свои константы с заглавными буквами so INITIAL_STATE , а не initialState #personalPreferences

1. Это само по себе не является ответом и лучше подходит в качестве комментария под упомянутым ответом или в качестве комментария под вопросом.

2. Верно, спасибо Питеру Б. за совет. Все еще новичок в этом 🙂 Жду моих 50 повторений, чтобы я мог правильно прокомментировать

Ответ №3:

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

 import React, { useState } from "react";

const initialState = {
  option1: false,
  option2: false,
  option3: false,
  option4: false
};

export default function Hello({ name }) {
  const [formState, setFormState] = useState(initialState);

  function updateForm(option) {
    const newState = { ...initialState }; // create new state object from initialState, spread the initialState to keep it immutable
    newState[option] = true; // set the selected option to true
    setFormState(newState); // update state with new state
  }

  return (
    <div>
      <input
        type="checkbox"
        onClick={() => updateForm("option1")}
        checked={formState.option1}
      />

      <input
        type="checkbox"
        onClick={() => updateForm("option2")}
        checked={formState.option2}
      />

      <input
        type="checkbox"
        onClick={() => updateForm("option3")}
        checked={formState.option3}
      />

      <input
        type="checkbox"
        onClick={() => updateForm("option4")}
        checked={formState.option4}
      />
    </div>
  );
}