Question

我的反应计划中有3个不同的组件。所有这三个程序都在同一页面上使用。现在我想要在我的第一个和第二个文本框中写入的内容，输入值将反映在第三个文本框中。我不知道如何在reactjs中的多个组件之间进行引用或通信。

以下是所有文件的代码。

**First.js**
//import ReactDom from 'react-dom';   

var NameStateComponent = React.createClass({
    nameChanged: function(event) {
        this.setState({
            name: event.target.value
        });
        console.log(React.findDOMNode('finalRoot'));
    },

    getInitialState: function (){                                               
        return{
            name: ''
        }
    },
    render: function(){
        return( <div> <input type='text' onChange={this.nameChanged} />&nbsp;{this.state.name.length}</div> ) }});
ReactDOM.render(
<NameStateComponent />,
document.getElementById("firstRoot")
);

**Second.js**
var NameStateComponent = React.createClass({
    name2Changed: function(event){
        this.setState({
            name2 : event.target.value
        })
    }, 
    getInitialState: function (){                                               
        return{
            name2: ''
        }
    },
    render: function(){
        return( <div> <input type='text' onChange={this.name2Changed} />&nbsp;{this.state.name2.length}</div> ) }});
ReactDOM.render(
<NameStateComponent />,
document.getElementById("secondRoot")
);

**Third.js**
var FinalComponent = React.createClass({
    nameChanged: function(event){
        this.setState({

        })
    }, 
    getInitialState: function (){                                               
        return{
            name3: ''
        }
    },

    render: function(){
        return( <div> <input type='text'/></div> ) }});
ReactDOM.render(
<FinalComponent />,
document.getElementById("finalRoot")
);

**Index.html**
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>React Hello World</title>
</head>
<body>
    <div>
        A<div id='firstRoot'></div> <br/>
        B<div id='secondRoot'></div><br/>
        C<div id='finalRoot'></div>
    </div>
    <script src="../react-15.0.1.js"></script>
    <script src="../react-dom-15.0.1.js"></script>
    <script src="../browser.min.js"></script>
    <script src="First.js" type="text/babel"></script>
    <script src="Second.js" type="text/babel"></script>
    <script src="Third.js" type="text/babel"></script>
</body>
</html>

Answer 1

使用ReactJS组件之间的通信从上到下发生。基本上，顶级父组件处理状态并使用props将其传递给其子级。

在您的情况下，您将拥有一个父组件，用于存储2个文本字段的状态并处理更改。

var Component = React.createClass({
  getInitialState: function() {
       return {
            val1: '',
            val2: ''
       }
  }, 
  handleChange: function(id, event) {
        var copyState = this.state;
        copyState[id] = event.target.value;
        this.setState(copyState);
   },

  render: function() {
    var concat = this.state.val1 + ' ' + this.state.val2;
    return (
        <div>
            <input type="text" value={this.state.val1} onChange={this.handleChange.bind(this, 'val1')} /> 
            <input type="text" value={this.state.val2} onChange={this.handleChange.bind(this, 'val2')}/> 
            <input type="text" value={concat} /> 
        </div>
    );
  }
});

在行动here

中查看

请注意，当我们直接编辑第三个文本字段时，您必须确定所需的行为。我没有在jsfiddle上绑定一个事件处理程序。

未知的反应组件通信

1 个答案: