React 芯片输入字段

Question

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

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

提前致谢

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

index.js:1 Warning: Cannot update a component (CreatePoll) while rendering a different component (ForwardRef(Autocomplete))

这是显示问题的代码和框： 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"
              />
            )}
          />

React 芯片输入字段

React chip input field

javascript

reactjs

react-material