React js material-ui Autocomplete从renderInput中获取选定的元素并切换到文本字段的InputProps

我正在尝试使用Autocomplete的新版本,我想确保从下拉菜单中选择一个元素时,我想修改文本字段的输入输入,以便以便将带有所选文本的芯片放入其中。

是否有办法知道autocomplete renderInput中的选定项目? 然后将此信息传递到文本字段的InputProps

Codesandbox

import React from "react";
import Checkbox from "@material-ui/core/Checkbox";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import CheckBoxOutlineBlankIcon from "@material-ui/icons/accessAlarm";
import CheckBoxIcon from "@material-ui/icons/CheckBox";

import { makeStyles,Paper,MenuItem,Chip } from "@material-ui/core";

const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
const checkedIcon = <CheckBoxIcon fontSize="small" />;

export default function CheckboxesTags() {
  return (
    <Autocomplete
      id="checkboxes-tags-demo"
      options={top100Films}
      //disablecloseonSelect
      getOptionLabel={option => option.title}
      renderOption={(option,{ selected }) => (
        <React.Fragment>{option.title}</React.Fragment>
      )}
      style={{ width: 500 }}
      renderInput={params => {
        //console.log("params",params)
        return (
          <TextField
            {...params}
            //variant="outlined"
            label="Label"
            placeholder="Placeholder"
            fullWidth
            /*InputProps={{
            startAdornment: params.inputProps.value && params.inputProps["aria-controls"] === null && (
              <Chip
                label={params.inputProps.value}
                style={{
                  backgroundColor: "#007bcc",color: "#fff"
                }}
              />
            )
          }}*/
          />
        );
      }}
    />
  );
}

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
  { title: "The Shawshank Redemption",year: 1994 },{ title: "The Godfather",year: 1972 },{ title: "The Godfather: Part II",year: 1974 },{ title: "The Dark Knight",year: 2008 },{ title: "12 Angry Men",year: 1957 },{ title: "Schindler's List",year: 1993 },{ title: "Pulp Fiction",{ title: "The Lord of the Rings: The Return of the King",year: 2003 },{ title: "The Good,the Bad and the Ugly",year: 1966 },{ title: "Fight Club",year: 1999 },{ title: "The Lord of the Rings: The Fellowship of the Ring",year: 2001 },{ title: "Star Wars: Episode V - The Empire Strikes Back",year: 1980 },{ title: "Forrest Gump",{ title: "Inception",year: 2010 },{ title: "The Lord of the Rings: The Two Towers",year: 2002 },{ title: "One Flew Over the Cuckoo's nest",year: 1975 },{ title: "Goodfellas",year: 1990 },{ title: "The Matrix",{ title: "Seven Samurai",year: 1954 },{ title: "Star Wars: Episode IV - A New Hope",year: 1977 },{ title: "City of God",{ title: "Se7en",year: 1995 },{ title: "The Silence of the Lambs",year: 1991 },{ title: "It's a Wonderful Life",year: 1946 },{ title: "Life Is Beautiful",year: 1997 },{ title: "The Usual Suspects",{ title: "Léon: The Professional",{ title: "Spirited Away",{ title: "Saving Private Ryan",year: 1998 },{ title: "Once Upon a Time in the West",year: 1968 },{ title: "American History X",{ title: "Interstellar",year: 2014 }
];

我希望我最终可以做的事情是这样的: react-textinput-chip

React js material-ui Autocomplete从renderInput中获取选定的元素并切换到文本字段的InputProps

ahricher1 回答:React js material-ui Autocomplete从renderInput中获取选定的元素并切换到文本字段的InputProps

据我所见,在他们的Customized Autocomplete example中,您可以将以下参数用于所选项目:

renderOption={(option,{ selected }) => (...)}
,

我认为您可以尝试使用 renderTags:

renderTags={(tagValue,getTagProps) => {
  return tagValue.map((option,index) => (
    <MyChip {...getTagProps({ index })} label={option.title} />
  ));
 }}
本文链接:https://www.f2er.com/3096836.html

大家都在问