Question

我正在用Typescript制作搜索栏，但没有输入任何内容。我的onChange方法上的术语“目标”一直显示

的错误

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>
  );
}
}

我该如何解决？

Answer 1

您的回调onChange似乎已经是一个字符串。因此您可以直接使用它，例如

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

Answer 2

我搜索了您的SearchBar材料ui，在文档中您可以看到onChange不会返回事件，但会在您键入时返回实际值。这是一个字符串...因此出现错误。

我还建议您是否使用TypeScript实际使用类型。

例如，您的onChange应该看起来像

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

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

2 个答案: