TypeScript 中的功能搜索栏答案

【问题标题】：Functional Search Bar in TypeScriptTypeScript 中的功能搜索栏
【发布时间】：2020-02-17 12:58:35
【问题描述】：

我已经创建了一个 Material UI 搜索栏前端，但现在我无法在其中输入任何内容。我该如何解决这个问题？

export default class userSearchPage extends Component <{}, { searchItem: string}>{
  constructor(props: Readonly<{}>) {
    super(props);
    this.state = {
      searchItem: 'ha'
    };
  }

  render() {
    return (
  <div>
    <PermanentDrawerLeft></PermanentDrawerLeft>
    <div className='main-content'>
      {/* <Typography>{this.state.searchItem}</Typography> */}
      <SearchBar

        onChange={e => {
          this.setState({searchItem: e.target.value})
        }}             

        onRequestSearch={() => console.log('onRequestSearch')}
        style={{
          margin: '0 auto',
          maxWidth: 800
        }}
      />
    </div>
  </div>
  );
}
}

onChange 方法不起作用并报错。

我觉得这种方法总的来说不是理想的方法。我还能如何让 Typescript 中的搜索栏正常工作，以便它可以读取和存储用户输入的内容？

【问题讨论】：

标签： javascript reactjs typescript material-ui searchbar

【解决方案1】：

试试这个

<form onSubmit={props.onRequestChange}>
  <input id="searchbartext" onChange={props.onChange} />
</form>

【讨论】：

我仍然在 searchbartext 上遇到同样的错误，现在在 onChange 上与这个错误一起返回：Type '(arg0: Event) => void' is not assignable to type '(event: ChangeEvent<HTMLInputElement>) => void'. Types of parameters 'arg0' and 'event' are incompatible. Type 'ChangeEvent<HTMLInputElement>' is missing the following properties from type 'Event': cancelBubble, composed, returnValue, srcElement, and 7 more.
{ onChange: (event: ChangeEvent) => void; onRequestChange: (arg0: any) => any;样式：React.CSSProperties |不明确的; }