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

如何在react的输入字段中显示搜索图标?

material material-ui material-design redux reactjs

user944513 · 技术社区 · 7 年前

我正在使用 material ui . 我想展示 search icon 在输入字段中,如图所示

我正在使用 this API

Here 是我的密码

我可以展示 TextField 但我无法添加搜索图标。你能加上怎么加吗?

 <TextField id="standard-bare" defaultValue="Bare" margin="normal" />

0 回复 | 直到 7 年前

mehamasum 7 年前

你需要使用 Input Adornments .

例如:

// imports
import IconButton from "@material-ui/core/IconButton";
import InputAdornment from "@material-ui/core/InputAdornment";
import SearchIcon from "@material-ui/icons/Search";

// render

<TextField
  label="With normal TextField"
  InputProps={{
    endAdornment: (
      <InputAdornment>
        <IconButton>
          <SearchIcon />
        </IconButton>
      </InputAdornment>
    )
  }}
/>

下面是一个演示:

const {
  TextField,
  InputAdornment,
  IconButton,
  SearchIcon,
  Icon
} = window['material-ui'];

class App extends React.Component {
  render() {
    return (
      <TextField
        label="With normal TextField"
        InputProps={{
          endAdornment: (
            <InputAdornment>
              <IconButton>
                <Icon>search</Icon>
              </IconButton>
            </InputAdornment>
          )
        }}
      />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@material-ui/core/umd/material-ui.development.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<div id="root"></div>

Irfan Alam 7 年前

你只需要输入政府

import InputAdornment from '@material-ui/core/InputAdornment';

像这样将inputprops添加到textfield

InputProps={{
  endAdornment: (
    <InputAdornment position="start">
      <SearchIcon />
    </InputAdornment>
   )
  }}

请找到所附的IMG,以演示您所需的解决方案。

推荐文章

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

2 年前

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

2 年前

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

2 年前

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

2 年前

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

2 年前

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

2 年前

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

2 年前

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

2 年前

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

2 年前

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

2 年前