将图标添加到Material-UI的Autocomplete组件开头

Question

我希望在Autocomplete组件的开头添加一个图标（使用startAdornment）。

我了解到Autocomplete是一个普通的文本输入框。

到目前为止，我尝试添加以下内容：

InputProps={{startAdornment: <InputAdornment position="start">kg</InputAdornment>,}}

针对<TextField /> 组件进行以下操作。如下所示：

<Autocomplete
            {...defaultProps}
            onChange={(event, value) => {
                handleOnChange(event, value);
            }}
            id="disable-close-on-select"
            sx={{ width: 300 }}
            renderInput={params => (
                <TextField
                    InputProps={{
                        startAdornment: <InputAdornment position="start">kg</InputAdornment>,
                    }}
                    {...params}
                    label="search"
                    variant="standard"
                />
            )}
        />

任何帮助都将是极好的，因为我是Material-UI生态系统的初学者。 defaultProps是这样定义的。

const defaultProps = {
    options: data,
    getOptionLabel: (option: DataType) => option?.id,
};

- murat dereköylü

Answer 1

属性的顺序很重要。您定义的InputProps会被来自renderInput的params.InputProps覆盖。如下所示：

<TextField InputProps={yourProps} {...params}

与以下代码等价：

<TextField InputProps={yourProps} InputProps={param.InputProps} {...}

最终结果是：

<TextField InputProps={param.InputProps} {...}

在扩展 params 后，您需要定义自定义的 InputProps，并确保同时扩展嵌套属性：

renderInput={(params) => {
  return (
    <TextField
      {...params}
      InputProps={{
        ...params.InputProps,
        startAdornment: (
          <InputAdornment position="start">kg</InputAdornment>
        )
      }}
      label="Movie"
    />
  );

- NearHuscarl

---

@muratdereköylü，这个不工作是因为我的回答吗？ - NearHuscarl

不，它确实有效。我没有使用你分享的所有部分。非常感谢 :) - murat dereköylü

参数从哪里来？当我使用控制台输出参数时，我看到有两个输入属性。一个是“inputProps”，另一个是“InputProps”。这两个属性是什么意思？它们的作用是什么？ - murat dereköylü

@muratdereköylü params 是从 Autocomplete 组件提供的，用于设置 TextField，以便与其交互时自动建议菜单会打开，供您选择。inputProps 用于传递给原生的 input 元素，InputProps 用于传递给 TextField 内部的 Input 组件，它是一个带有 MUI 风格的 input 包装器。 - NearHuscarl

@NearHuscarl，您的想法是正确的，但是当“Autocomplete”组件具有“multiple”属性时它不起作用（“renderTags”属性会出问题）。 - Jabal Logian