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 params：

Your requirements could not be resolved to an installable set of 
packages.

Problem 1
  - Conclusion: remove symfony/symfony v3.0.6
  - Conclusion: don't install symfony/symfony v3.0.6
  - Conclusion: don't install symfony/symfony v3.0.5
  - Conclusion: don't install symfony/symfony v3.0.4
  - Conclusion: don't install symfony/symfony v3.0.3
  - Installation request for sonata-project/user-bundle dev-master ->
satisfiable by sonata-project/user-bundle[dev-master].
  - Conclusion: don't install symfony/symfony v3.0.2
  - Conclusion: don't install symfony/symfony v3.0.1
  - sonata-project/user-bundle dev-master requires symfony/form ^2.3 -> 
satisfiable by symfony/form[.....

Answer 2

感谢@omerts，使用refs是一个最好的主意，也是使用状态的另一种方式，我也是新的反应。

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

codepen

的工作示例

如何将一个组件的值发送到react js中的另一个组件？

2 个答案: