时间戳

首页 > 解决方案 > 如何将变量从子级传递给父级

reactjs - 如何将变量从子级传递给父级

问题描述

我有一个反应功能。此函数返回一个搜索栏。当搜索栏发生变化时，会设置一个名为 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> 
      </>
    );}
}

当搜索状态改变时，“query”被记录到控制台，但“handleSearchFill”没有。

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

我试图参考这个问题。

标签： reactjs

解决方案

而不是在孩子中定义一个新的状态变量。使用父级的状态并将操作此状态的函数传递给子级。现在，每当子查询发生变化时，使用作为道具传递的函数来更改父状态。这叫做提升国家。

从代码中，我看到您已经这样做了

变化：

在 onChange 函数的 try 块中添加这一行

props.onChange(esQueryDsl);

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

  1. 要在同一父级的另一个子级中使用此状态，只需将此状态（查询）作为道具传递给该子级。

前任：

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

推荐阅读