将值从子节点传递给父组件

Question

我有组件A和B.组件一个传递状态作为组件的prop,表示它名为show

所以在我的组件B的渲染功能中它将是这样的

{this.props.show &&
   <div>popup content</div>
}

但是我现在怎么关闭呢？我必须将组件B中的标志传递给父级？据我所知它反应你可以把东西传回父母.

Answer 1

为了将数据从子节点传递给父节点,父节点需要将能够处理该数据的函数传递给子节点.

var Parent = React.createClass({

    getData: function(data){
         this.setState({childData: data});     
    }

    render: function(){
        return(
            <Child sendData={this.getData} />
        );
    }

});

var Child = React.createClass({

    textChange: function(event){
        this.setState({textString: event.target.value});
    }

    buttonClick: function(){
        this.props.sendData(this.state.textString);
    }

    render: function(){
        <div>
        <input type="text" value={this.state.textString} 
               onChange={this.textChange}/>
        <button onClick={this.buttonClick}
        </div>
    }

});

还有其他处理数据的方法,在创建数据存储以存储全局变量和处理各种事件时可能值得.通过这种方式,您可以保持应用程序的数据流单向.然而,在较小规模的情况下,该解决方案应该足够了.