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関数を渡します。私。ない機能1 - あなたは<App>状態を入れたい場合は

//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

は、それが反応いっぱいコンポーネントである必要があります。その変換を行い、その状態値を更新するコールバック関数を作成すると仮定すると、そのコールバックを反応ルータによってロードされている子ページに渡す方法が不思議に思うかもしれません。そのためには、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> 
    ) 
    } 

);