React js材料ui自动完成芯片，里面有一个按钮

Posted 2023-02-22

【中文标题】React js材料ui自动完成芯片，里面有一个按钮

【英文标题】：React js material ui autocomplete chips with a button inside

【发布时间】：2020-06-18 23:29:13

【问题描述】：

从图片中可以看出，第一个输入字段是一个使用芯片的工作自动完成。

第二个输入字段始终是自动完成但不起作用，其中一个按钮已插入到 TextField 中。

我想做的是将它们放在一起，即像第一种情况一样具有自动完成功能，但内部有一个按钮以提供现代用户的用户体验。

你能帮帮我吗？

链接：codesandbox

代码：

/* eslint-disable no-use-before-define */
import React from "react";
import  Button, InputAdornment  from "@material-ui/core";
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 Tags() 
  const classes = useStyles();

  return (
    <div className=classes.root>
      <Autocomplete
        multiple
        id="tags-outlined"
        options=top100Films
        getOptionLabel=option => option.title
        defaultValue=[top100Films[13]]
        filterSelectedOptions
        renderInput=params => (
          <TextField
            ...params
            variant="outlined"
            label="filterSelectedOptions"
            placeholder="Favorites"
          />
        )
      />
      <Autocomplete
        multiple
        id="tags-outlined"
        options=top100Films
        getOptionLabel=option => option.title
        defaultValue=[top100Films[13]]
        filterSelectedOptions
        renderInput=params => (
          <TextField
            ...params
            variant="outlined"
            label="filterSelectedOptions"
            placeholder="Favorites"
            InputProps=
              endAdornment: (
                <InputAdornment position="end">
                  <Button variant="contained" color="primary" size="small">
                    Subscribe
                  </Button>
                </InputAdornment>
              )
            
          />
        )
      />
    </div>
  );


const top100Films = [
   title: "The Shawshank Redemption", year: 1994 ,
   title: "The Dark Knight", year: 2008 ,
   title: "12 Angry Men", year: 1957 ,
   title: "Schindler's List", year: 1993 ,
   title: "Pulp Fiction", year: 1994 ,
   title: "The Lord of the Rings: The Return of the King", year: 2003 ,
   title: "The Good, the Bad and the Ugly", year: 1966 
];

【参考方案1】：

我知道我迟到了，但在第二次自动完成中，您将覆盖 ...params 中的 InputProps。为了使自动完成和按钮起作用，您必须像这样设置 InpurProps：

renderInput=(params) => (
    <TextField
      ...params
      label="Select a place"
      placeholder="Place"
      InputProps=
        ...params.InputProps,
        endAdornment: (
          <Stack direction="row" spacing=1>
            <Button>Subscribe</Button>
            params.InputProps.endAdornment
          </Stack>
        ),
      
    />
  )

以上示例使用了 mui v5。