如何将react-autosuggest中的值传递给父组件？

Question

在我的app.js中，我有这个

render() {
  return (
    <div id="App">
      <SearchBar />
    </div>
  );
}

在SearchBar中，我导入react-autosuggest并拥有它 -

render() {
  const { value, suggestions } = this.state;
  const inputProps = {
    placeholder: "Search",
    value,
    onChange: this.onChange
  };

  return (
    <Autosuggest 
      style={style}
      suggestions={suggestions}
      onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
      onSuggestionsClearRequested={this.onSuggestionsClearRequested}
      getSuggestionValue={getSuggestionValue}
      renderSuggestion={renderSuggestion}
      inputProps={inputProps}
      onSubmit={this.doSomething}
      />
  );
}

所有这些功能都是反应自动提供的标准样板功能。如何访问其父级app.js内的SearchBar内搜索内容？

Answer 1

您可以使用props将数据从Autosuggest事件提升到父组件。在App中创建一个方法，并将其作为支柱传递给SearchBar组件。然后，使用Autosuggest事件调用它。

应用

class App extends React.Component {
  onSubmit(e) {
    // `e` is the data that was passed through from the `Autosuggest` event.
    console.log(e);
  }

  render() {
    return (
      <div id="App">
        <SearchBar onSubmit={this.onSubmit} />
      </div>
    );
  }
}

<强>搜索栏

<Autosuggest onClick={this.props.onSubmit} />

Answer 2

您可以在SearchBar组件上使用回调函数。请根据您的用例执行以下步骤：

1. 在SearchBar组件上添加以下功能

   onHandleChange(event, value){
     this.setState({ value });
     this.props.getInputData(event, value);
   }
   

2. 在AutoSuggest组件上使用以上功能

   return (
     <Autosuggest 
       ...
       onChange={(event, value) => this.onHandleChange(event, value)}
       ...
     />
   
   ); 
   

3. 使用SearchBar组件之类的

   render() {
     return (
      <div id="App">
       <SearchBar getInputData={(event, value) => this.getAutosuggestInput(event, value)}/>
      </div>
     );
   }
   

4. 在此处获得父组件输入框的值

   getAutosuggestInput = (event, value) => {
       //add your logic here
   }