ReactJS - Автозаполнение пользовательского интерфейса для динамической фильтрации параметров - PullRequest
Новая
       7

ReactJS - Автозаполнение пользовательского интерфейса для динамической фильтрации параметров

0 голосов
/ 02 февраля 2020

Я работаю над ReactJS, я создал компонент, используя автозаполнение пользовательского интерфейса материала, в котором мне нужно отфильтровать результат по выборкам. Как вы видите, объект имеет «GROUP», как только пользователь выберет любые опции, мне нужно удалить всю группу из списка отображения. Если я выбираю Регион или Азию (Регион), мне нужно отфильтровать все объекты, у которых есть ГРУППА «RG», и вернуть отфильтрованный объект, как только я удалю выбранное значение. Заранее спасибо. 

const Typeahead = props => {
    const classes = useStyles();
    let Dictionary = React.useState([]);
    const MainDictionary = [
      { NAME: "Region", FIELD: "RG" , GROUP: "RG"},
      { NAME: "Asia (Region)", FIELD: "RG-Asia" , GROUP: "RG"},
      { NAME: "Australia (Region)", FIELD: "RG-Australia" , GROUP: "RG"},
      { NAME: "Central America (Region)", FIELD: "RG-Central America" , GROUP: "RG"},
      { NAME: "Europe (Region)", FIELD: "RG-Eastern Europe" , GROUP: "RG"},
      { NAME: "Country", FIELD: "CY" , GROUP: "CY"},
      { NAME: "Country 1 (Country)", FIELD: "SC-Country 1" , GROUP: "CY"},
      { NAME: "Country 2 (Country)", FIELD: "SC-Country 2" , GROUP: "CY"},
      { NAME: "Country 3 (Country)", FIELD: "SC-Country 3" , GROUP: "CY"},
      { NAME: "Country 4 (Country)", FIELD: "SC-Country 4" , GROUP: "CY"},
      { NAME: "Country 5 (Country)", FIELD: "SC-Country 5" , GROUP: "CY"}
    ];
    Dictionary = MainDictionary;

    function filterOptions(event, params) {
      Dictionary = MainDictionary;
      params.forEach(element => {
        Dictionary = Dictionary.filter(b => {
          return b.GROUP !== element.GROUP;
        }).map(a => {
          return a;
        });
      });
    }

    return (
        <div className={classes.root}>
            <Autocomplete
                multiple
                id="tags-standard"
                width="auto"
                options={Dictionary}
                getOptionLabel={option => option.NAME}
                onChange={(event, newValue) => {
                    filterOptions(event, newValue);
                }}
                value = {selectedValue}
                renderInput={params => (
                <TextField
                    {...params}
                    variant="standard"
                    placeholder="Select From Dictionary"
                    fullWidth
                />
                )}
                renderOption={(option, { inputValue }) => {
                const matches = match(option.NAME, inputValue);
                const parts = parse(option.NAME, matches);

                return (
                    <div>
                    {parts.map((part, index) => (
                        <span
                        key={index}
                        style={{ color: part.highlight? "#36a5f7": "" , fontWeight: part.highlight ? 700 : 400 }}
                        >
                        {part.text}
                        </span>
                    ))}
                    </div>
                );
                }}
            />
        </div>
    );
};
...