React中如何获取bootstrap-table2-toolkit的SearchBar输入值？

先修正你当前代码的报错 #

你代码里的onChange={handleChange()}是核心错误——这里加括号会导致组件渲染时立刻执行函数，而非输入变化时触发。正确写法是传函数引用handleChange，不要加括号。

另外，部分版本的SearchBar组件，onChange的参数不是event对象，而是直接返回输入框的当前值，这时候用event.target.value会报错，需要调整参数处理逻辑：

修复后的onChange示例 #

// 情况1：组件onChange直接传入输入值
const handleChange = (value) => {
  const currentUrlParams = new URLSearchParams(window.location.search);
  currentUrlParams.set('query', value);
  this.props.history.push(`${window.location.pathname}?${currentUrlParams.toString()}`);
};

// 情况2：组件onChange传入event对象
const handleChange = (event) => {
  const value = event.target.value;
  const currentUrlParams = new URLSearchParams(window.location.search);
  currentUrlParams.set('query', value);
  this.props.history.push(`${window.location.pathname}?${currentUrlParams.toString()}`);
};

// 绑定onChange时不要加括号
<SearchBar onChange={handleChange} />

其他获取搜索值的方式 #

1. 使用React Ref直接获取 #

如果需要在非输入触发的场景（比如按钮点击）获取值，可以用Ref绑定到SearchBar：

// 函数组件示例
import { useRef } from 'react';

const YourComponent = () => {
  const searchRef = useRef(null);

  const getCurrentSearchValue = () => {
    const value = searchRef.current?.value;
    if (value) {
      // 这里可对value做后续操作
      console.log('当前搜索输入:', value);
    }
  };

  return (
    <div>
      <SearchBar ref={searchRef} />
      <button onClick={getCurrentSearchValue}>获取搜索值</button>
    </div>
  );
};

2串联加上新品副本牵引�识—the destructive论坛有Calculate时间，哦不对，是通过表格实例获取： #

bootstrap-table2-toolkit的搜索功能和表格绑定，你可以通过表格的Ref获取当前搜索文本：

const tableRef = useRef(null);

const getSearchText = () => {
  const searchText = tableRef.current?.getOptions().searchText;
  console.log('当前表格搜索值:', searchText);
};

// 表格组件绑定ref
<BootstrapTable ref={tableRef} {...其他配置} />

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