جافا سكريبت - كيف ترسل قيمة من مكون واحد إلى مكون آخر في React JS؟

هل يمكنك من فضلك أن تخبرني كيف أرسل قيمة حقل الإدخال إلى المكون الثاني عند النقر على الزر. لدي زر واحد وحقل إدخال في المكون الأول. عند النقر على الزر، أحتاج إلى إرسال قيمة حقل الإدخال إلى المكون الثاني.

ها هو شيفرتي 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('/')

الإجابة رقم 1

أفضل حل سيكون إنشاء بعض الهندسة المعمارية التي تسمح لك بوجود كائن حالة منفصل، وتغييره، وتمرير التغييرات إلى مكوناتك. انظر Flux، أو Redux.

لحل محدد بدقة، يمكنك استخدام معلمات الرابط:

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

الإجابة رقم 2

شكراً @omerts، استخدام المراجع فكرة رائعة وأيضاً هناك طريقة أخرى باستخدام الحالة وأنا أيضاً جديد على React.

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

مثال عملي على كود بن