Функциональная панель поиска в TypeScript - PullRequest
Новая
       7

Функциональная панель поиска в TypeScript

0 голосов
/ 17 февраля 2020

Я создал интерфейс панели поиска пользовательского интерфейса для материала, но пока не могу что-либо в него ввести. Как я могу это исправить? 

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, чтобы она могла читать и хранить то, что вводит пользователь?

1 Ответ

0 голосов
/ 17 февраля 2020

Попробуйте это 

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