如何在reactjs中为自动完成组件设置多值答案

【问题标题】：How to set multi value to autocomplete component in reactjs如何在reactjs中为自动完成组件设置多值
【发布时间】：2020-08-05 07:21:41
【问题描述】：

我需要在 reactjs 中将多选值设置为自动完成。我在我的项目中使用 Material-UI 组件。

你可以在上面看到。第一个数据来自第一个用户，第二个数据来自另一个用户。我想填写这样的值。然后，用户可以删除选定的值或添加新值。

如果你可以使用虚拟数据，我可以使用数据库中的数据。我只需要如何做到这一点。

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>
  )
}

【问题讨论】：

你可以在codesandbox上重现这个，这样其他人会更容易赶上

标签： reactjs material-ui

【解决方案1】：

我制作了一个密码箱 https://codesandbox.io/s/wizardly-saha-gor3s?file=/src/App.js

您基本上必须使组件成为受控组件。 https://material-ui.com/components/autocomplete/#playground

您可以通过使用 'getOptionSelected' 属性来做到这一点

【讨论】：