javascript - 如何在 React JS 中将一个组件的值发送到另一个组件？

Question

你能告诉我如何在单击按钮时在第二个组件上发送输入字段值吗？我在第一个组件中有一个按钮和输入字段。在单击按钮时我需要将输入字段值发送到第二个组件

这是我的代码 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('/')

Answer 1

最好的解决方案是创建一些架构，允许您拥有一个单独的状态对象，更改它，并将更改传递给您的组件。参见 Flux , 或 Redux .

对于精确的解决方案，您可以使用 url 参数:

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