单击时如何从 MUI 自动完成、文本字段中删除占位符文本？

Question

我正在使用 Material-UI (MUI) 自动完成功能和 TextField，并且我想实现特定的行为。目前，当我单击搜索栏时，占位符文本会移动到文本字段的顶部。但是，我想在单击搜索栏时完全删除占位符文本。

这是我当前的代码：

import * as React from 'react';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';

const top100Cars = [
  { label: 'Toyota' },
  { label: 'Ford' },
  { label: 'Chevrolet' },
  { label: 'Tesla' },
  { label: 'Honda' },
  { label: 'BMW' },
  { label: 'Audi' },
  { label: 'Mercedes-Benz' },
  { label: 'Ferrari' },
  { label: 'Porsche' },
  { label: 'Lamborghini' },
  { label: 'Nissan' },
  { label: 'Volkswagen' },
  { label: 'Mazda' },
  { label: 'DeLorean' },
  { label: 'Dodge' },
];



export default function searchBar() {
  // const [selectedBrand, setSelectedBrand] = React.useState(null);
  return (
    <Autocomplete
      disablePortal
      id="combo-box-demo"
      options={top100Cars}
      // value={selectedBrand}
      // onChange={(event, newValue) => {
      //   setSelectedBrand(newValue);
      // }}
      sx={{
        width: 254, backgroundColor: 'white', borderRadius: 50,
      }}
      renderInput={(params) => (
        <TextField
          {...params}
          label="Марка"
          size='small'
        />
      )}
    />
  );
}

这就是现在的样子：

我想删除单击文本字段时出现在左上角的占位符文本。我希望这对你有意义！

我尝试使用各种配置设置InputLabelProps和InputProps属性，但占位符文本仍然保留。如何修改代码以实现单击搜索栏时删除占位符文本的所需行为？

Answer 1

您可以尝试在文本字段中放置一个空标签，如下所示：

<TextField
    id="standard-full-width"
    label=""
    placeholder="Placeholder"
/>

按照建议这里