Я пытаюсь реализовать логику проверки switchToggles в React. По условию задачи необходимо, чтобы можно было проверить только один переключатель. И если отмечен другой переключатель, следует снять флажок с того, который был отмечен ранее.
Переключатели отображаются в строках таблицы (по одному на строку) в функции, которая возвращает фрагмент с кнопками:
const renderButtons = (cell) => {
return (
<Fragment>
<SwitchToggle />
<SettingsIcon className = {joiner(st.toolsIcon, st.leftMargin)}/>
<DeleteIcon className = {st.toolsIcon}/>
</Fragment>
)
}
SwitchToggle - это компонент разработки Ant:
export default function SwitchToggle({ checked, onChange }){
return (
<Switch
className = {st.switch}
size = {'small'}
checkedChildren = {'On'}
unCheckedChildren = {'Off'}
onChange = {onChange||null}
checked = {checked||undefined}
/>
)
}
Да, я согласен. Но мне нужен стиль, подобный этому переключателю. И все же эти переключатели отображаются построчно, а не в группе, поэтому связи между ними нет. По сути, они не группа.
Вы можете стилизовать элементы, и атрибут name определяет группу. Что ж, вы должны иметь возможность хранить «активный» идентификатор переключателя или индекс, что-то еще, и устанавливать значение checked на основе этой информации, используя onChange для управления состоянием.
Можете ли вы поделиться своим табличным компонентом там, где вы используете renderButtons?



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Это очень похоже на группу переключателей. Некоторые проблемы становятся тривиальными, если вы используете правильные базовые семантические входы.