查克拉UI-复选框组

Question

我正在使用带有React Typescript的Chakra UI并实现一个复选框组默认值由作为道具传递的外部状态控制。

问题是CheckboxGroup不接受来自外部源的默认值

代码如下：

import React, {FC, useCallback, useEffect, useState} from "react";
import { CheckboxGroup, Checkbox, VStack } from "@chakra-ui/react";
interface IGroupCheckbox {
values: StringOrNumber[],
labels: StringOrNumber[],
activeValues: StringOrNumber[]
onChange: (value:StringOrNumber[])=> void
}
const GroupCheckbox:FC<IGroupCheckbox> = ({
values,
labels,
activeValues,
onChange
}) => {
const [currActiveValues, setCurrActiveValues] = useState<StringOrNumber[]>();
const handleChange = useCallback((value:StringOrNumber[]) => {
if(value?.length === 0) {
alert('you must have at least one supported language');
return;
}
onChange(value);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(()=>{
if(activeValues) {
setCurrActiveValues(['en'])
}
},[activeValues])
return (
<CheckboxGroup 
onChange={handleChange}
defaultValue={currActiveValues}
>
<VStack>
{values && labels && values.map((item:StringOrNumber, index:number)=>
{
return (
<Checkbox 
key={item} 
value={item}
>
{labels[index]}
</Checkbox>
)
}
)}
</VStack>
</CheckboxGroup>
)
}
export default GroupCheckbox

当我将defaultValue参数(而不是状态管理的(更改为defaultValue={['en']}时，它可以正常工作，但该道具的任何其他输入都不起作用。我反复检查这些值是否正确。

Answer 1

通常，传递一个defaultValue道具"来自外部来源"；实际上是有效的。我想在您的代码中，只有['en']可以正常工作，因为您显式地使用setCurrActiveValues(['en'])而不是setCurrActiveValues(activeValues)。

defaultValue道具将仅在组件的初始渲染上考虑；之后更改defaultValue属性将被忽略解决方案：通过使用value道具而不是defaultValue，使其成为受控组件。

请注意，除非将参数传递给useState()，否则在初始渲染时，状态变量将默认为undefined。

附带说明：您也不需要单独的状态变量currActiveValues。相反，您可以直接使用activeValues。

const GroupCheckbox = ({ values, labels, activeValues, onChange }: IGroupCheckbox) => {
const handleChange = useCallback(
(value: StringOrNumber[]) => {
if (value?.length === 0) {
alert("you must have at least one supported language")
return
}
onChange(value)
},
[onChange]
)
return (
<CheckboxGroup onChange={handleChange} value={activeValues}>
<VStack>
{labels && values?.map((item: StringOrNumber, index: number) => (
<Checkbox key={item} value={item}>
{labels[index]}
</Checkbox>
))}
</VStack>
</CheckboxGroup>
)
}