Используя antd, у меня есть простая RadioGroup, состоящая из трех RadioButton. Все работает, я ожидаю.
Кроме того, я определил кнопку, которая должна очищать выбранную кнопку и возвращать RadioGroup к значениям по умолчанию. Это не работает. Базовые данные в порядке, но RadioButton по умолчанию не проверяется визуально.
Самый правый RadioButton используется по умолчанию. Выбор любого из двух других и нажатие кнопки «Очистить» не проверяет крайний правый RadioButton.
Я смотрел на эту проблему в течение нескольких дней и не вижу своей ошибки. Код немного зашумлен, потому что задействована база данных.
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.info('e1', filters);
}}, [filters]);
const handleClearFilters = () => {
console.info('clear1', filters);
setFilters(initFilters);
};
const handleCheckbox = (props) => {
console.info('checkbox', filters);
console.info('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.info(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;





Используйте value в RadioGroup вместо атрибута 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
Большое вам спасибо, особенно за все ваши усилия по размещению исправленного кода на codeandbox. Ты спас меня от сумасшествия.