类型“字符串”上不存在属性“目标”

Question

I am making a search bar in Typescript but it is not taking any input. The term target on my onChange method keeps giving an error that

Property 'target' does not exist on type 'string'.

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

  render() {
    return (

  <div>
    <PermanentDrawerLeft></PermanentDrawerLeft>
    <div className='main-content'>
      <SearchBar
        onChange={e => {
          this.setState({searchItem: e.target.value})
        }}             

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

How could I fix this?

Answer 1

Your callback onChange seems like it's already a string. So you can use it directly eg

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

Answer 2

I searched for your SearchBar material ui and in the documentation you can see that the onChange doesnt return the event but the actual value as you type. Which is a string...hence the error.

I would also suggest if you are using TypeScript to actually use types.

So for example your onChange should look like

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