React函数组件使用material-ui-search-bar报this未定义错误如何解决？

报错原因 #

你当前使用的是React函数组件，this关键字在函数组件中不存在实例指向，npm官方文档给出的示例是基于Class类组件写法，直接套用到函数组件就会触发this is undefined报错，和SearchBar组件本身的value属性逻辑无关。

函数组件正确使用方式 #

通过React内置的useState钩子维护搜索值状态，直接绑定到SearchBar的value属性即可：

import { useState } from 'react';
import SearchBar from "material-ui-search-bar";
 
function App() {
  // 声明搜索值的state，初始值可根据需求设置为空字符串
  const [searchValue, setSearchValue] = useState('');

  const doSomethingWith = (value) => {
    // 此处编写搜索触发后的业务逻辑
    console.log('搜索内容：', value)
  }

  return (
    <SearchBar
      value={searchValue}
      onChange={(newValue) => setSearchValue(newValue)}
      onRequestSearch={() => doSomethingWith(searchValue)}
    />
  );
}

补充说明 #

• SearchBar的value属性属于标准的受控组件属性，用法和原生input的value属性完全一致
• 如果你使用Class类组件开发，直接使用官方文档的示例写法即可生效，注意提前在constructor中初始化this.state = {value: ''}

内容的提问来源于stack exchange，提问作者redpanda2236