React子组件向父组件传递变量：SearchBar传递esQueryDsl

你当前遇到的核心问题是子组件没有调用父组件传递的onChange回调函数，导致父组件的handleSearchFill永远不会触发，自然无法完成esQueryDsl的传递。下面是具体的修复方案：

问题分析 #

你的子组件SearchBar2内部定义了自己的onChange函数处理搜索栏变化，但只更新了子组件自身的状态，完全没有调用父组件通过props传入的onChange方法（也就是父组件的handleSearchFill）——这就是父组件收不到数据的根本原因。

修复后的子组件代码 #

我调整了子组件的逻辑，重点在生成esQueryDsl后调用父组件的回调：

import { useState, Fragment } from 'react';
import { EuiSearchBar, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';

export const SearchBar2 = (props) => {
  const [query, setQuery] = useState(initialQuery);
  const [error, setError] = useState(null);

  // 重命名内部处理函数，避免和父组件的onChange属性混淆
  const handleSearchChange = ({ query, error }) => {
    if (error) {
      console.log(error);
      setError(error);
    } else {
      console.log("query");
      setError(null);
      setQuery(query);
    }

    let esQueryDsl;
    try {
      esQueryDsl = EuiSearchBar.Query.toESQuery(query);
    } catch (e) {
      esQueryDsl = e.toString();
    }

    // 关键：调用父组件传递的onChange回调，把生成的esQueryDsl传过去
    props.onChange(esQueryDsl);
  };

  const renderSearch = () => {
    return (
      <EuiSearchBar 
        defaultQuery={initialQuery} 
        box={{ placeholder: 'search' }} 
        onChange={handleSearchChange} 
      />
    );
  };

  return (
    <Fragment>
      <EuiFlexGroup alignItems="center">
        <EuiFlexItem>{renderSearch()}</EuiFlexItem>
      </EuiFlexGroup>
    </Fragment>
  );
};

关键修改点说明 #

1. 重命名内部函数：把原来的onChange改成handleSearchChange，避免和父组件传递的onChange属性命名冲突，提升代码可读性。
2. 触发父组件回调：在生成esQueryDsl（包括转换失败的错误信息）后，通过props.onChange(esQueryDsl)将数据传递给父组件，确保父组件的handleSearchFill能接收到数据并更新状态。
3. 覆盖所有场景：不管搜索输入是否有错误、toESQuery转换是否成功，都会把最终结果传递给父组件，保证数据流的完整性。

后续扩展 #

父组件的handleSearchFill已经能接收并存储esQueryDsl，接下来你只需要把父组件的this.state.query作为props传递给其他负责渲染结果的子组件即可，比如：

// 父组件render方法示例
return (
  <>
    <EuiPage>
      <SearchBar2 onChange={this.handleSearchFill}/>
      {/* 假设Results是渲染搜索结果的子组件 */}
      <Results query={this.state.query} />
    </EuiPage>
  </>
);

这样整个数据流就通了：搜索栏内容变化 → 生成esQueryDsl → 传递给父组件 → 父组件更新状态 → 传递给结果组件渲染。

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