Мне нужно установить несколько выбранных значений для автозаполнения в reactjs. Я использую в своем проекте компоненты Material-UI.
введите описание изображения здесь
Fe вы можете увидеть выше. Первые данные поступают от первого пользователя, а вторые данные поступают от другого пользователя. Я хочу ввести значение вот так. Затем пользователь может удалить выбранные значения или добавить новые.
Если вы можете сделать это с фиктивными данными, я могу использовать их с данными из базы данных. Все, что мне нужно, как это сделать.
import React from 'react';
import Chip from '@material-ui/core/Chip';
import Autocomplete from '@material-ui/lab/Autocomplete';
import { makeStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
const useStyles = makeStyles((theme) => ({
root: {
width: 500,
'& > * + *': {
marginTop: theme.spacing(3),
},
},
}));
export default function Multi({callbackFromMultiSelect,reference,favBooks}) {
const classes = useStyles();
return (
<div className={classes.root}>
<Autocomplete
multiple
id="tags-standard"
options={favBooks}
getOptionLabel={(option) => (option.name)}
// onClick={()=>alert('test')}
onChange={(event, value) =>callbackFromMultiSelect({value:value,reference:reference})}
// defaultValue={[top100Films[1]]}
renderInput={(params) => (
<TextField
{...params}
variant="standard"
label="favBooks"
placeholder="favBooks"
/>
)}
/>
</div>
);
}
И мой родительский компонент
import React from 'react'
import AutoCompleteTest from './AutoComplete'
export const Test = () => {
const callbackFromMultiSelect = (item) => {
console.log(item)
}
const favBooks=[
{name:"LOTR",from:"a",to:"a"},
{name:"GOT",from:"b",to:"b"},
{name:"HP",from:"c",to:"c"}
]
return (
<div className={'mainStore'}>
Test
<AutoCompleteTest callbackFromMultiSelect={callbackFromMultiSelect} reference={'test'} favBooks={favBooks}/>
<br />
<AutoCompleteTest callbackFromMultiSelect={callbackFromMultiSelect} reference={'test'} favBooks={favBooks}/>
</div>
)
}