Question

如何将Material-UI's Autocomplete中的值存储到React的状态。自动完成功能使用多项选择，并以字符串数组作为值。

Answer 1

具有功能组件的示例

在此示例中，我们将显示一个自动完成组件，其中每个选项具有多个选择和复选框。

使用初始值定义状态（在我们的示例中：空数组）：

  const [ndl, setNdl] = React.useState([]);

我们可以选择的选项：

const ndlExample = ['Berlin', 'München', 'Saarbrücken', 'Köln'];

自动完成组件：

           <Autocomplete
              multiple
              value={ndl}
              id="areaFilterId"
              options={ndlExample}
              limitTags={1}
              disableCloseOnSelect
              getOptionLabel={option => option}
              onChange={(event: any, value: string[] | null) => setNdl(value)}
              renderOption={(option, { selected }) => (
                <React.Fragment>
                  <Checkbox icon={icon} checkedIcon={checkedIcon} style={{ marginRight: 8 }} checked={selected} />
                  {option}
                </React.Fragment>
              )}
              style={{ width: 280 }}
              renderInput={params => <TextField {...params} variant="standard" label="Niederlassung" />}
            />

Material's UI Autocomplete API

物料UI自动完成：将值与状态同步

1 个答案: