如何解决在反应挂钩中使一个为真,而其他人则为假
什么是最好的选择(选项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>
)
}
解决方法
如果您的状态仅包含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>
)
,
我正在写确切的东西作为Prakash的答案...似乎是最简单的方法...
尽管我喜欢用大写字母写常量,所以INITIAL_STATE
而不是initialState
#personalPreferences
我不完全确定为什么您不想使用单选按钮来执行此操作,但是这里有一些适用于您的用例的代码。
import React,{ useState } from "react";
const initialState = {
option1: 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>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。