如何将值存储为select中的布尔值

Question

我想在Next.js项目中将select的值存储为布尔值，而不是字符串。现在，下面选择组件的行为是将其保存为字符串。

export default function Status({ register }) {
return (
<div>
<label htmlFor="Status" className="block text-sm font-medium text-gray-700 dark:text-white">
Status
</label>
<select
id="Status"
name="Status"
{...register("isActive", {})}
>
<option value={true}>Active</option>
<option value={false}>Inactive</option>
</select>
</div>
);
}

如何将值存储为布尔值而不是字符串？

Answer 1

有一种变通方法可以强制它转换为布尔值，类似于以下内容：

<select
{...register("isActive", {
setValueAs: (v) => Boolean(v)
})}
>
<option value={true}>Active</option> //Boolean("any string") gives true
<option value={""}>Inactive</option> //Boolean("") gives false
</select>

setValueAs通过函数运行输入值来返回输入值，并且由于输入在提交时产生字符串，因此强制其成为Boolean的唯一方法是传递一个空字符串。

Answer 2

由于某些原因，我无法发表评论，不过，大脑袋会堆叠。

呃，既然你是以字符串的形式存储的，我建议你把值附加到一个字符串上，然后用状态作为依赖项运行useEffect，设置你自己的布尔状态。例如

useEffect(() => {setMyState(value === "isActive" ? true : false)}, [value])

我脑子里的屁有点太大了，我只是模仿一下。

const Component = () => {
// your component, let's say you have these two states
const [linkedState, setLinkedState] = useState("")
const [booleanState, setBooleanState] = useState("")
// this state is linked to the string value, you then make a 
useEffect with the state as dependency
useEffect(() => {
// this happens when linkedState changes
setBooleanState(linkedState === "isActive" ? true : false)
// if linkedState equals isActive it sets your boolean to true, else it goes false
}, [linkedState])
}