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

Posted 2023-02-22

【中文标题】React Material-UI 获取检查的项目列表

【英文标题】：React Material-UI get list of items checked

【发布时间】：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" />
      )
    />

【参考方案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 的值。