材质 UI 自动完成：将值与状态同步

Question

如何将Material-UI 的 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 的 UI 自动完成 API