Блог

У меня есть простая функция компонента / управления, которая позволяет пользователю выбирать элемент из трех различных выпадающих меню. В настоящее время я размышляю над тем, как организовать прохождение штата/реквизита. Пункты меню для каждого раскрывающегося меню идентичны для каждых трех, и они не меняются. Тем не менее, возможно, потребуется какая-то информация, передаваемая в списке событий, поскольку цель состоит в том, чтобы убедиться, что в выбранных пользователями пунктах меню нет повторов. Другими словами, когда пользователь выбирает что-то из одного поля, два других поля должны удалить этот элемент из своего выбора (и снова, когда пользователь выбирает второй элемент). Вот соответствующий код:

 function SelectBox(props) {
    const classes = useStyles();
    const [strategy, setStrategy] = React.useState('');

    const handleChange = event => {
        setStrategy(event.target.value);
    };

    const textMap = {
        1:'Top pick',
        2:'Second pick',
        3:'Third pick'
    };

    return (
            <FormControl className={classes.formControl}>
                <InputLabel id="demo-simple-select-helper-label">Strategy {props.selectBox.id}</InputLabel>
                <Select
                    labelId="demo-simple-select-helper-label"
                    id="demo-simple-select-helper"
                    value={strategy}
                    onChange={handleChange}
                >
                    <MenuItem value="">
                        <em>None</em>
                    </MenuItem>
                    {props.strategies.map(strategy => (
                        <MenuItem value={strategy}>{strategy}</MenuItem>
                    ))}

                </Select>
                <FormHelperText>{textMap[props.selectBox.id]}</FormHelperText>
            </FormControl>
    );
}

export default SelectBox;
 

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

Редактировать

Как и предлагалось, я поднял состояние, чтобы мои пункты меню теперь заполнялись динамически, а не жестко, как раньше. Однако я не уверен, что отмена штата решает проблему сравнения братьев и сестер. (Примечание: я оставил обработчик событий предварительно поднятого состояния для удобства, могу предположить, что теперь это опора в этой области, которая получена из состояния в другом файле)

Состояние из этого файла является:

   state = { 
    selectBoxes: [
        {id:1, strategies:['A','B', 'C','D','E']},
        {id:2, strategies:['A','B', 'C','D','E']},
        {id:3, strategies:['A','B', 'C','D','E']},
    ]
 }
 

Вопрос

Как бы я подошел к логике списка событий для раскрывающихся меню «Братья», чтобы убедиться, что элемент не повторяется?