Question

我是新来的反应者，一直在使用Material UI组件。我想显示一个带有搜索图标的简单SearchBar。到目前为止，这是我所拥有的，但是当我开始键入内容时，不会显示清除图标。（使用Chrome）

           <TextField
                type="search"
                variant="outlined"
                margin="normal"
                InputProps={{
                    startAdornment: (
                        <InputAdornment position="start">
                            <SearchIcon />
                        </InputAdornment>
                    ),
                }}
            />

我想念什么？如何将用户输入限制为仅数字？

Answer 1

它对我有用，请查看this代码沙箱

下面是我对该组件的总体实现

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

function App() {
  return (
    <div className="App">
      <TextField
        type="search"
        variant="outlined"
        margin="normal"
        InputProps={{
          startAdornment: (
            <InputAdornment position="start">
              <SearchIcon />
            </InputAdornment>
          )
        }}
      />
    </div>
  );
}

PS：仅当组件处于不受控制状态时（即当您不向其传递value道具时），才会显示“清除”图标

材质的UI TextField type ='search'没有显示清晰的图标

1 个答案: