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

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