I am using antd checkbox group, now I want only one checkbox check in the same time, this is my code looks like:
<Checkbox.Group onChange={onChange} >
<Row>
<Col>
<Checkbox key={selected.length > 0?selected[0]+"1":1} value="内容不合规" checked={isDisabled("内容不合规")}>
内容不合规
</Checkbox>
<Checkbox key={selected.length > 0?selected[0]+"2":2} value="内容无法验证" checked={isDisabled("内容无法验证")}>
内容无法验证
</Checkbox>
<Checkbox key={selected.length > 0?selected[0]+"3":3} value="图片不清晰" checked={isDisabled("图片不清晰")}>
图片不清晰
</Checkbox>
<Checkbox key={selected.length > 0?selected[0]+"4":4} value="请联系客服" checked={isDisabled("请联系客服")}>
请联系客服
</Checkbox>
</Col>
</Row>
</Checkbox.Group>
in the onChange function, I change the checked value in the state like this:
function onChange(checkedValues) {
if(checkedValues.length === 1){
onCheckedChange(checkedValues);
}
if(checkedValues.length > 1){
let newest = checkedValues[checkedValues.length - 1]
let newArray = new Array();
newArray.push(newest);
onCheckedChange(newArray)
}
}
this function set the newest check value into the state checked field, when the user change the checkbox, the state changed and the UI rerender. then I control the checkbox checked or not using this function:
function isDisabled(id) {
let disabled = selected.length > 0 && selected.indexOf(id) === -1;
return !disabled;
};
this function isDisabled check the current checked value in the state and make only the state stored value checked and other checkbox unchecked, I tracing the code and found the isDisabled successfully return the checked flag but the check group UI still not change. why did this happen? what should I do to make the checkbox change and only select one? I read some article and tell that only the checkbox key changed, the checkbox refresh, then I add this:
key={selected.length > 0?selected[0]+"1":1}
still did not work.