Question

我有反应功能。此函数返回搜索栏。更改搜索栏后，将设置一个名为esQueryDsl的变量。我想将此变量传递回父对象，还呈现搜索栏。

孩子：

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

  const onChange = ({ 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();
    }
  };

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

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

父母：

class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      query: EuiSearchBar.Query.MATCH_ALL
    }        
    this.handleSearchFill = this.handleSearchFill.bind(this);
  }
  
  handleSearchFill = (data) =>{
    console.log('handleSearchFill')
    this.setState({query:data})
  }
  
  render() {
    return (
      <>
        <EuiPage> 
            <SearchBar2 onChange={this.handleSearchFill}/>  
        </EuiPage> 
      </>
    );}
}

更改搜索状态后，“查询”会记录到控制台，而“ handleSearchFill”则不会。

我的意图是将esQueryDsl传递回父级。然后将其传递给另一个孩子以呈现结果。

我试图参考this question。

Answer 1

不是在子级中定义新的状态变量。使用父级的状态，并将处理此状态的函数传递给子级。现在，只要查询在子级中发生更改，就可以使用作为道具传递的函数来更改父级状态。这称为提升状态。

从代码中，我看到您已经完成了

更改：

将此行添加到onChange函数的try块中

props.onChange(esQueryDsl);

我也不认为状态query在子组件中很有用。

要在同一个父母的另一个孩子中使用此状态，只需将此状态（查询）作为对那个孩子的支持。

例如：

// In parent     
return (
        <EuiPage> 
            <SearchBar2 onChange={this.handleSearchFill}/>  
            <SecondChild query={this.state.query}/>
        </EuiPage> 
);

如何将变量从孩子传递给父母

1 个答案: