代码之家 › 专栏 › 技术社区 › Donko

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

autocomplete material-ui reactjs javascript

-1

Donko · 技术社区 · 1 年前

我正在使用带有TextField的Material UI(MUI)Autocomplete,我想实现一种特定的行为。目前,当我单击搜索栏时,占位符文本会移动到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属性,但占位符文本仍然保留。单击搜索栏时,如何修改代码以实现删除占位符文本的预期行为?

1 回复 | 直到 1 年前

Angel Rafael 1 年前

您可以尝试在textField中放置一个空标签,如下所示:

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

如建议 here

推荐文章

Mohammed Sabir · 下一个js getServerSideProps中的水合错误

9 月前

mettamyron · 具有多用途的材质UI滑块单击时状态重复

11 月前

MatterOfFact · React:Formik形式的物料UI单选按钮组重置不起作用

12 月前

assembler · MUI 5自动完成将禁用的项目样式更改为不使用不透明

1 年前

Terje Nygård · 反应18和材料UI(@mui)。样式不会附加到主题中

1 年前

Alexander Farber · 如何在MUI X DataGrid列中显示img?

1 年前

ian · 使用“responsiveFontSizes”与“experiental_extendTheme”和“experimental_CssVarsProvider”反应MUI`

1 年前

beuluis · MaterialUI样式在带Vite的Shadow DOM中安装不正确的问题

1 年前

ismail.khn · 如何更改MUI日期选择器的“选择日期”标签?

1 年前

Donko · 单击时如何从MUI自动完成、文本字段中删除占位符文本?[副本]

1 年前