#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>
);
}