Флажок отмечен статусом

Question

Я использую компоненты MaterialUI и сопоставляю массив объектов для создания некоторых флажков, как показано ниже.

const wrapper = () => {
    ...
    return(
        <FormGroup>
            {Object.keys(products).map((key) => {
                return <FormControlLabel label={products[key].name} key={key} control={
                    <CheckBox value={products[key].name} />
                }
            })
    );
}

Так, учитывая код выше. Допустим, у массива products есть 3 объекта. Всякий раз, когда я проверяю флажок, я хочу, чтобы все остальные отмечали флажок false, а тот, который проверял флажок - true.

Я использую состояние Hook, поэтому приведенный выше код является функциональным компонентом.

Answer 1

Я бы предложил использовать радио кнопки вместо флажков в этом случае. https://material -ui.com / компоненты / радио-кнопка /

Одновременно можно выбрать не более одной радиокнопки, что вы и описываете.

Answer 2

Компонент флажка Material-UI принимает реквизит checked логического типа.

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

<ч />

Кстати, поведение, которого вы хотите достичь, не выполняется с помощью флажков, это поведение Радиокнопка , где пользователь может выбирать только один параметр за раз, когда используются флажки для множественного выбора.

(я полагаю, документация по флажку material-ui имеет очень четкое объяснение этого вопроса. Дайте мне знать, если вы можете не отставать от себя или вам тоже нужен пример кода.)