Question

键入时我正在使用material-ui自动完成组件，我需要向我建议的过滤列表，这些有什么事件吗？

Answer 1

您需要创建两个数组状态。

假设有一个初始选项列表，例如

const initialList = [
  {
    name: "item1",
  },
  {
    name: "item2",
  },
  {
    name: "item3",
  },
  {
    name: "item4",
  },
  {
    name: "item5",
  },
  {
    name: "item6",
  },
  {
    name: "item7",
  },
];

然后，传递给useState，

const [itemList, setItemList] = useState(initialList);
const [itemSelected, setItemSelected] = useState([]);

const handleChange = () => (event, value) => {
   setItemSelected(value);
}


<Autocomplete
            multiple
            id='items-outlined'
            value={itemSelected}
            options={itemList}
            getOptionLabel={(option) => option.name}
            getOptionSelected={(option, value) => option.name === value.name}
            onChange={handleChange()}
            filterSelectedOptions
            fullWidth
            renderInput={(params) => (
              <TextField
                {...params}
                variant='outlined'
                label='Items'
                placeholder='Select items...'
                fullWidth
                InputLabelProps={{ shrink: true }}
              />
            )}
          />

我在项目中使用它

Material-ui自动完成过滤列表

1 个答案: