需要帮助从状态（React）中的自动完成（多个）捕获用户选择

Question

感谢阅读。我正在使用 Material-UI 自动完成并试图弄清楚如何捕获用户选择。这里是 the code。现在，我正在尝试 console.log 用户从选择列表中选择或删除电影。如果我能让它工作，我可能会在 handleChange 中使用状态设置器来捕获电影并读取状态值以在提交对话框后进行处理。由于这是一个多重自动完成，因此可能有多个选定值。

当前 event.target.value handleChange 在从列表中选择电影时显示零，在删除时显示未定义。我需要它来显示实际标题。

很高兴考虑任何建议，以达到 objective 能够在提交对话框时处理所有自动完成选择的目的。提前致谢！

反应版本：16.8

Answer 1

通过从 onChange 发送参数 (event, value) 解决。请查看以下代码段中的 onChange 值。

export default function App() {
  const classes = useStyles();

  const handleChange = (value) =>
  {
    const x = value.map(function(a){return {title:a.title};});
    console.log(x);
  };

  return (
    <div className={classes.root}>
      <Autocomplete
        multiple
        id="tags-outlined"
        options={top100Films}
        onChange={(event, value) => handleChange(value)}
        getOptionLabel={(option) => option.title}
        defaultValue={[top100Films[14]]}
        filterSelectedOptions
        renderInput={(params) => (
          <TextField
            {...params}
            variant="outlined"
            label="filterSelectedOptions"
            placeholder="Favorites"
          />
        )}
      />
    </div>
  );
}

需要帮助从状态（React）中的自动完成（多个）捕获用户选择

Need help capturing the user choice from Autocomplete (multiple) in state (React)

reactjs

autocomplete

material-ui