在 Material UI 和 React 的文本输入中添加图标

Question

我有一个这种形式的文本输入：

  <FormControl className='searchOrder'>
    <input
      className='form-control'
      type='text'
      placeholder='Search order'
      aria-label='Search'
      value={this.number}
      input={<Input />}
      onChange={this.handleChangeOrderNumber}
    />
  </FormControl>

它在功能上运行良好，但我想在输入的左侧添加一个搜索图标，如下所示：

我不知道在哪里添加该代码 sn-p，我尝试了内部输入，但它抛出错误，所以我把它放在后面，但屏幕上没有出现任何图标。

  <FormControl className='searchOrder'>
    <input
      className='form-control'
      type='text'
      placeholder='Search order'
      aria-label='Search'
      value={this.number}
      input={<Input />}
      onChange={this.handleChangeOrderNumber}
    />
    <span>
      <i class='fas fa-search'></i>
    </span>
  </FormControl>

有什么办法解决这个问题吗？

如果相关，searchOrder css 类：

.searchOrder {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 20%;
  max-width: 250px;
  height: 20%;
  left: 0px;
  top: 0px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  box-sizing: border-box;
  border-radius: 4px;
}

更新：

我也尝试过 InputAdornment，但图标仍然没有出现。

  <FormControl className='searchOrder'>
    <InputLabel htmlFor='input-with-icon-adornment'></InputLabel>
    <input
      className='form-control'
      type='text'
      id='input-with-icon-adornment'
      placeholder='Search order'
      aria-label='Search'
      value={this.number}
      input={<Input />}
      onChange={this.handleChangeOrderNumber}
      startAdornment={
        <InputAdornment position='start'>
          <SearchIcon />
        </InputAdornment>
      }
    />
  </FormControl>

Answer 1

只需使用材质 ui Input 这样的组件：

 <Input
        id="input-with-icon-adornment"
        startAdornment={
          <InputAdornment position="start">
            <SearchIcon />
          </InputAdornment>
        }
  />

阅读更多关于它here