使用React Router v3將值傳遞給父組件使用React Router v3

Question

我認爲這個問題在這裏得到了答案，但我只是沒有得到它。

How to pass props to react component through routing using react-router?

我希望用戶進行搜索，並將該值傳遞給父組件，所以我可以在整個應用程序中使用它的狀態。

// App.js 
const App = ({ children }) => (
    <div> 
    <Grid> 
     { children } 
    </Grid> 
    </div> 
); 

這是路線。我想在Index.js搜索（提交表單）時更新App.js中的狀態。

render(
    <Router history={ browserHistory }> 
    <Route path="/" component={ App }> 
     <IndexRoute name="index" component={ Index } /> 

Answer 1

好吧，我不知道你在做什麼指數成分正在做，但通常你傳遞一個setState功能到子組件，然後調用它，這反過來觸發父。即

//App.js 

class App extends Component 
{ 
    return_data = (data) => { 
    this.setState(data); 
    } 

    render() 
    { 
    <div> 
     <Index return_data={this.return_data} 
    </div> 
    } 

} 

// Index.js 
class Index extends Component 
{ 
    return_data =() => { 
    let data = { input: this.input.value } 
    this.props.return_data(data); 
    } 

    render() 
    { 
    <div> 
     <input onChange={this.return_data) ref={(i) => this.input = i} /> 
    </div> 
    } 
} 

Answer 2

如果你想要把狀態<App>，那麼它必須是一個完整的陣營組成部分 - 不是一種功能。假設你進行了轉換並創建了一個更新狀態值的回調函數，那麼你可能想知道如何將該回調傳遞給react-router加載的任何子頁面。爲此，您要使用React.cloneElement()並執行類似操作：

class App extends Component { 
    ... 

    state = { searchVal : ''} 

    updateSearch(event){this.setState({searchVal : event.target.value})} 

    ... 

    render(){ 
    return (
     <div> 
     <Grid> 
      { React.cloneElement(this.props.children, { 
       searchVal : this.state.searchVal, 
       updateSearch : this.updateSearch 
      }) } 
     </Grid> 
     </div> 
    ) 
    } 

);