Question

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

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

如果可以使用虚拟数据，则可以使用数据库中的数据。我所需要的全部方法。

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

Answer 1

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

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

您可以使用“ getOptionSelected”道具

来完成此操作

如何在ReactJS中为自动完成组件设置多个值

1 个答案: