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

【问题标题】：React Material-UI get list of items checkedReact Material-UI 获取检查的项目列表
【发布时间】：2021-03-08 17:13:03
【问题描述】：

我有一个 React + Material-UI 前端。一个部分允许用户从下拉列表中选择项目，我想要用户选择的任何内容的列表。用户还可以单击 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" />
      )}
    />

【问题讨论】：

标签： javascript reactjs material-ui frontend

【解决方案1】：

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

<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 是一个对象数组：

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

【讨论】：