javascript - 在 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>

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

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

  <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

只需像这样使用 material ui Input 组件:

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

了解更多 here