material-ui - 构建一个基本的搜索栏 Material-UI

Question

我想构建一个带有搜索图标（类似于 on Material-UI）的非常基本的搜索栏，并在用户点击输入或单击搜索输入时调用具有搜索字段当前值的函数。我是新手，Material-UI我正在努力通过不同的文本字段元素找到自己的方式。

我目前有这个代码

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

class ...somecode
...somecode
  constructor(props) {
    super(props);
    this.state = {
      resources: [],
      value: '',
    };
  }

  handleChange(event) {
    console.log(event.target.value);
    this.setState({ value: event.target.value });
  }

  search(/* access value upons enter/ search icon click */) { <--------------------------
  }
...some code
return (
  <form id="search">
    <Input type="text" value={value} onChange={(event) => { this.handleChange(event); }} placeholder="Search..." autoFocus fullWidth />
  </form>
);

ps：我很难摆弄输入套件中可用的所有 API 和选项（我强烈建议在文档中解释它们之间的关系）

标签： material-ui