React Material-UI 获取检查项目列表

Question

我有一个 React + Material-UI 前端。 一个部分允许用户从下拉列表中选择 select 项目，我想要用户选择的任何内容的列表。 用户还可以单击 x 并删除他们选择的内容。 如何使用 state 或一些变量来获取项目的最终列表？

代码：

<Autocomplete
      multiple
      className={classes.inputField}
      id="checkboxes-tags-demo"
      options={userData}

      disableCloseOnSelect
      getOptionLabel={(option) => option.username}
      renderOption={(option, { selected }) => (
        <React.Fragment>
          <Checkbox
            icon={icon}
            checkedIcon={checkedIcon}
            style={{ marginRight: 8 }}
            checked={selected}
          />
          {option.username}
        </React.Fragment>
      )}
      style={{ width: 500 }}
      renderInput={(params) => (
        <TextField {...params} variant="outlined" label="Users" placeholder="Favorites" />
      )}
    />

Answer 1

您可以通过将onChange添加到 Autocomplete 组件来访问当前选定的值。 我已经使用 Material UI 示例来展示这一点（我只是将值记录到控制台——您可能想要更新 state 项目）：

<Autocomplete
        multiple
        id="tags-standard"
        options={top100Films}
        onChange={(event, value) => {
          // Printing the current value array
          console.log(value);
        }}
        getOptionLabel={(option) => option.title}
        defaultValue={[top100Films[13]]}
        renderInput={(params) => (
          <TextField
            {...params}
            variant="standard"
            label="Multiple values"
            placeholder="Favorites"
          />
        )}
/>

该value是一个对象数组：

这里有一个沙箱（同样，它使用标准的 Material UI 示例代码）。 我只更新了第一个自动完成组件来打印 onChange 的值。