Material-ui 自动完成：向 startAdornment 添加一个值

Question

我有自动完成多选权限。

https://codesandbox.io/s/bold-jackson-dkjmb?file=/src/App.js

在示例中，我有 3 个城市选项。如何在选中内容时手动在 TextField 中添加自动添加的值？

这里换句话说：

 renderInput={(params) => {
        console.log(params);
        return (
          <TextField
            {...params}
            variant="outlined"
            label="Cities"
            placeholder="Enter cities"
            autoComplete="off"
            InputProps={{
              ...params.InputProps,
              endAdornment: (
                <React.Fragment>
                  {params.InputProps.endAdornment}
                </React.Fragment>
              )
            }}
          />
        );
  }}

我希望能够在呈现文本字段之前向 params.InputProps.startAdornment 添加一个值。

由于每个选定的对象似乎都是非常复杂的对象，我该如何手动执行此操作（push() 太复杂了）？关于如何添加对象的任何想法：

手动？

Answer 1

在从 dropdown/checkbox 中选择一个值之前，startAdornment 的值是未定义的。因此，您可以将 startAdornment 属性添加到 InputProps，如下所示，

import { Chip } from '@material-ui/core';
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  chip: {
    margin: theme.spacing(0.5, 0.25)
  }
}));

const classes = useStyles();

const handleDelete = (item) => () => {...};

 renderInput={(params) => {
    console.log(params);
    return (
      <TextField
        {...params}
        variant="outlined"
        label="Cities"
        placeholder="Enter cities"
        autoComplete="off"
        InputProps={{
          ...params.InputProps,
          startAdornment: (
            <Chip
              key={"manual"}
              tabIndex={-1}
              label={"manually added"}
              className={classes.chip}
              onDelete={handleDelete("blah")}
              deleteIcon // requires onDelete function to work
            />
          ),
          endAdornment: (
            <React.Fragment>
              {params.InputProps.endAdornment}
            </React.Fragment>
          )
        }}
      />
    );
  }}

Material-ui 自动完成：向 startAdornment 添加一个值

Material-ui Autocomplete: Add a value to startAdornment

javascript

reactjs

autocomplete

material-ui