未通过程序检查antd RadioButton

Question

使用antd，我有一个由三个RadioButton组成的简单RadioGroup。我所期望的一切都能奏效。

此外，我定义了一个按钮，它应该清除选定的按钮并将RadioGroup恢复为默认值。它不起作用。基本数据是可以的，但默认的RadioButton不会进行视觉检查。

最右边的单选按钮是默认值。选择其他两个按钮中的任何一个并按下清除按钮都不会选中最右侧的单选按钮。

我已经研究这个问题好几天了，没有发现我的错误。由于调用了数据库，所以代码有点嘈杂。

Codesandbox

import React, { useState, useEffect, Fragment } from 'react';
import { Radio } from 'antd';
import { ConsoleLog } from './consoleLog';
const RadioGroup = Radio.Group;
const App = () => {
const [filters, setFilters] = useState(false);
const initFilters = {
wireSizeId: { displayValue: '', type: 'num', dbKey: '' },
colorId: { displayValue: '', type: 'num', dbKey: '' },
insulationId: { displayValue: '', type: 'num', dbKey: '' },
wireTypeId: { displayValue: '', type: 'num', dbKey: '' },
solidStranded: { displayValue: '', type: 'num', dbKey: null },
copperAlum: { displayValue: '', type: 'num', dbKey: null },
};
useEffect(() => {
setFilters(initFilters);
}, []);
useEffect(() => {
if (filters) {
console.log('e1', filters);
}}, [filters]);
const handleClearFilters = () => {
console.log('clear1', filters);
setFilters(initFilters);
};
const handleCheckbox = (props) => {
console.log('checkbox', filters);
console.log('checkbox', props.target.name, props.target.value, props.target.id);
let updated = {};
updated[props.target.name] =
{ displayValue: props.target.id, type: 'num', dbKey: props.target.value };
console.log(updated);
setFilters({...filters, ...updated});
};
return (
(filters?<Fragment>
<ConsoleLog>Render</ConsoleLog>
<div>
<ConsoleLog>Radio {filters['solidStranded'].dbKey}</ConsoleLog>
<RadioGroup
name='solidStranded'
onChange={handleCheckbox}
defaultValue=''
>
<Radio
value='0'
id='Solid'
checked={filters['solidStranded'].dbKey === '0'}
>
Solid
</Radio>
<Radio
value='1'
id='Stranded'
checked={filters['solidStranded'].dbKey === '1'}
>
Stranded
</Radio>
<Radio
value=''
id='none'
checked={filters['solidStranded'].dbKey === null}
>
None
</Radio>
</RadioGroup>
</div>
<div>
<button onClick={handleClearFilters} >
Clear Filters
</button>
</div>
</Fragment>:null)
);
};
export default App;

Answer 1

在RadioGroup中使用value而不是checked属性，值不能为空

import React, { useState, Fragment } from "react";
import { Radio } from "antd";
const RadioGroup = Radio.Group;
const App = () => {
const initFilters = {
wireSizeId: { displayValue: "", type: "num", dbKey: "" },
colorId: { displayValue: "", type: "num", dbKey: "" },
insulationId: { displayValue: "", type: "num", dbKey: "" },
wireTypeId: { displayValue: "", type: "num", dbKey: "" },
solidStranded: { displayValue: "", type: "num", dbKey: "-1" }, // change
copperAlum: { displayValue: "", type: "num", dbKey: null }
};
const [filters, setFilters] = useState(initFilters);
const handleClearFilters = () => {
setFilters(initFilters);
};
const handleCheckbox = (props) => {
setFilters({
...filters,
solidStranded: {
// change
displayValue: props.target.id,
type: "num",
dbKey: props.target.value
}
});
};
// the ternary operator isn't necessary now.
return filters ? (
<Fragment>
<div>
<RadioGroup
name="solidStranded"
onChange={handleCheckbox}
value={filters["solidStranded"].dbKey} // change
>
<Radio value="0" id="Solid">
Solid
</Radio>
<Radio value="1" id="Stranded">
Stranded
</Radio>
<Radio value="-1" id="none">
None
</Radio>
</RadioGroup>
</div>
<div>
<button onClick={handleClearFilters}>Clear Filters</button>
</div>
</Fragment>
) : null;
};
export default App;

https://codesandbox.io/s/chekbox-example-8vh07?file=/src/App.js