javascript - ako poslať hodnotu z jednej komponenty do druhej komponenty v react js?

Môžete mi, prosím, povedať, ako odoslať hodnotu vstupného poľa do druhého komponentu po kliknutí na tlačidlo. Mám jedno tlačidlo a vstupné pole v prvom komponente. Po kliknutí na tlačidlo potrebujem odoslať hodnotu vstupného poľa do druhého komponentu.

tu je môj kód http://codepen.io/naveennsit/pen/GZbpeV?editors=0010

var { Router, Route,browserHistory } = ReactRouter
class First extends React.Component{
  sendValue(){
    browserHistory.push('/second');
  }
  render(){
    return (<div>
    <input type='text' />
      <button onClick={this.sendValue}>send</button>
    </div>)
  }
}

class Second extends React.Component{
  render(){
    return <div>second component</div>
  }
}
class Main extends React.Component{
  render(){
    return (
     <Router history={browserHistory}>
          <Route path='/' component={First}></Route>  
          <Route path='/second' component={Second}></Route>  
    </Router>)
   }
}
React.render( <Main />,document.getElementById('app'));
browserHistory.push('/')

Odpoveď č. 1

Najlepším riešením by bolo vytvoriť nejakú architektúru, ktorá by vám umožnila mať samostatný objekt stavu, meniť ho a odovzdávať zmeny vašim komponentom. Pozrite sa na Flux alebo Redux.

Pre presné riešenie môžete použiť URL parametre:

class First extends React.Component{
  sendValue(){
    browserHistory.push('/second/' + this.refs.textField.value);
  }

  render(){
    return (
      <div>
        <input type='text' ref='textField' />
        <button onClick={() => {this.sendValue()}}>send</button>
      </div>)
  }
}

class Second extends React.Component { 
  render(){
    return <div>second component: {this.props.params.test}</div>
  }
}

class Main extends React.Component{
  render(){
    return (
     <Router history={browserHistory}>
          <Route path='/' component={First}></Route>  
          <Route path='/second/:test' component={Second}></Route>  
    </Router>)
   }
}

Odpoveď č. 2

ďakujem @omerts, použitie refs je najlepší nápad a ďalší spôsob je použitie stavu a ja som tiež nový v Reacte.

var { Router, Route, browserHistory } = ReactRouter
class First extends React.Component{
  constructor(props){
    super(props);
    this.sendValue = this.sendValue.bind(this);    
    this.setValue = this.setValue.bind(this);
    this.state = {
      userID: "@nageshwar_uidev"
    };
  }
  setValue(e){
    this.setState({
      userID: e.target.value
    });
  }
  sendValue(){
    //console.log(this.state.userID);
    browserHistory.push('/second/'+this.state.userID); 
  }
  render(){
    return (
      <div>
        <input type='text' value={this.state.userID} onChange={this.setValue} />
        <button onClick={this.sendValue}>send</button>
      </div>
    )
  }
}

class Second extends React.Component{
  render(){
    let { userID } = this.props.params;
    return <div>The userID from first component is {userID} <a href="#" onClick={()=>browserHistory.push('/')}>back</a></div>
  }
}
class Main extends React.Component{

  render(){
    return (
     <Router history={browserHistory}>
          <Route path='/' component={First}></Route>
          <Route path='/second/:userID' component={Second}></Route>
    </Router>)
   }
}
React.render( <Main />,document.getElementById('app'));
browserHistory.push('/')

funkčný príklad na codepen