有什么方法可以将InputBase与多个项目的自动完成功能结合使用？

Question

我在编辑模式下的 MUI DataGrid 中使用自动完成功能，但由于

TextField

，它会呈现额外的边框。

        <Autocomplete
          multiple
          freeSolo
          value={value || []}
          onChange={(event, newValue) => {
            api.setEditCellValue({ id, field, value: newValue }, event);
          }}
          options={['aaa', 'bbb']}
          renderInput={(params) => <TextField {...params} />}
          fullWidth
        />

当没有

Autocomplete

时我正在做的就是使用

InputBase

代替，但这里我尝试使用

renderInput

属性进行多次尝试，输入显示，但所选项目作为芯片的逻辑不存在（其中在某种程度上是有意义的，因为它是原始输入）。

您知道重用所有

TextField

逻辑但不使用包装元素

MuiFormControl

的正确方法吗？

（同时我会修补CSS以使之更合适）

谢谢你，

Answer 1

您可以将 TextField 自定义为如下所示，而无需将其包装在 MuiFormControl 中。如果是外观让您烦恼的话。

类似这样的：

    <Autocomplete
      multiple
      freeSolo
      value={value || []}
      onChange={(event, newValue) => {
        api.setEditCellValue({ id, field, value: newValue }, event);
      }}
      options={['aaa', 'bbb']}
      renderInput={(params) => (
        <TextField
          {...params}
          variant="standard" // Use a variant with no FormControl border
          InputProps={{
            ...params.InputProps,
            disableUnderline: true,
}}
          sx={{
            '& .MuiFormControl-root': {
              display: 'unset',
            },
          }}

      placeholder="Type something"
    />
  )}
/>

如果需要使用InputBase，可以试试这个：

    <Autocomplete
      multiple
      freeSolo
      value={value || []}
      onChange={(event, newValue) => {
        api.setEditCellValue({ id, field, value: newValue }, event);
      }}
      options={['aaa', 'bbb']}
      renderTags={(tagValue, getTagProps) =>
        tagValue.map((option, index) => (
          <Chip
            key={option}
            label={option}
            {...getTagProps({ index })}
          />
        ))
      }
      renderInput={(params) => {
       const {InputProps, ...rest} = params
        return (
          <InputBase
            {...rest}
            {...InputProps}
            inputRef={params.InputProps.ref}
            placeholder="Type something"
            fullWidth
          />
        )
}}
    />

而且，您不仅需要传递给 BaseInput 参数，还需要从那里提取专门针对该字段的参数 (params.InputProps)，并且不要忘记还指定 inputRef