Material UI芯片阵列如何像Angular Chip Input一样使用

Question

是否可以使用React Material UI芯片阵列模拟Angular Material Chip输入样式的输入？

我正在尝试使React中的Angular Material Chip输入看起来干净。Material UI芯片阵列似乎是最接近的东西，但它似乎并不支持本地输入。有没有一种配置可以用来获得同样的功能？

Answer 1

根据@ryan cogswell的评论，使用Autocomplete和freeSolo设置产生的结果类似于Angular Material的Chip输入。

import React from "react";
import { Chip, TextField } from "@material-ui/core";
import { Autocomplete } from "@material-ui/lab";
import "./App.css";
export const App: React.FC = () => {
return (
<div className="App">
<Autocomplete
multiple
id="tags-filled"
options={[]}
freeSolo
renderTags={(value: string[], getTagProps) =>
value.map((option: string, index: number) => (
<Chip
variant="outlined"
label={option}
{...getTagProps({ index })}
/>
))
}
renderInput={(params) => (
<TextField
{...params}
variant="filled"
label="freeSolo"
placeholder="Favorites"
/>
)}
/>
</div>
);
};

Answer 2

Material UI v5(或MUI(还有一个名为MUI芯片输入的包，它可以与React 17和18一起使用！

简单的使用方式。

请在此处查看文档：https://viclafouch.github.io/mui-chips-input/

import React from 'react'
import { MuiChipsInput } from 'mui-chips-input'
const MyComponent = () => {
const [value, setValue] = React.useState([])
const handleChange = (newValue) => {
setValue(newValue)
}
return <MuiChipsInput label="Chips" fullWidth value={value} onChange={handleChange} />
}