建立基本的搜索栏Material-UI

Question

我想构建一个带有搜索图标（类似于Material-UI上的图标）的非常基本的搜索栏，并在用户点击Enter或单击搜索Enter时调用具有搜索字段当前值的函数。我是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>
);

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

Answer 1

使用文档的此部分。应用程序栏组件上有一个搜索栏https://material-ui.com/components/app-bar/#app-bar-with-search-field

对于该函数，将onChange事件侦听器添加到搜索栏组件。