javascript - miten lähettää arvo yhdestä komponentista toiseen komponenttiin react js:ssä?

voisitko kertoa minulle, miten lähettää syötekentän arvo toiselle komponentille nappia painettaessa. Minulla on yksi nappi ja syötekenttä ensimmäisessä komponentissa. Nappia painettaessa minun täytyy lähettää syötekentän arvo toiselle komponentille

tässä on koodini 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('/')

Vastaus #1

Paras ratkaisu olisi luoda jonkinlainen arkkitehtuuri, joka mahdollistaisi erillisen tilan objektin hallinnan, sen muuttamisen ja muutosten välittämisen komponenteillesi. Katso Flux tai Redux.

Tarkkaan kohdennettuun ratkaisuun voit käyttää URL-parametreja:

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>)
   }
}

Vastaus #2

kiitos @omerts, viitteiden käyttäminen on paras idea ja myös toinen tapa on käyttää tilaa, ja olen myös uusi Reactissa.

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('/')

toimiva esimerkki CodePenissä