反应芯片输入字段

Question

我正在使用 React 17 并尝试使用不同的芯片输入字段，例如material-ui-chip-input等。不幸的是，我尝试过的所有 npm 包都不适用于 React 版本 17。

您知道有任何适用于此版本的组件吗？或者我如何自己创建一个组件？

提前致谢

编辑：我已经成功地做到了我想要的，但不幸的是，当按 Enter /添加新项目时，我现在收到以下错误：

CreatePollindex.js:1 警告：渲染不同组件 ( ) 时无法更新组件( ForwardRef(Autocomplete))

这是显示问题的codesandbox： https://codesandbox.io/s/compassionate-greider-wr9wq ?file=/src/App.tsx

Answer 1

你为什么不使用这个而不是一个新的包呢？自动完成功能正是这样做的。

const [receivers, setReceivers] = React.useState<string[]>([]);


    import Autocomplete from '@mui/material/Autocomplete';
         <Autocomplete
            multiple
            onChange={(e, value) => setReceivers((state) => value)}
            id="tags-filled"
            options={top100Films.map((option) => option.title)}
            defaultValue={[top100Films[13].title]}
            freeSolo
            renderTags={(value, getTagProps) =>
              value.map((option, index) => (
                <Chip variant="outlined" label={option} {...getTagProps({ index })} />
              ))
            }
            renderInput={(params) => (
              <TextField
                {...params}
                variant="filled"
                label="freeSolo"
                placeholder="Favorites"
              />
            )}
          />