react 父子组件之间的通信和函数调用

绝地灬酷狼 2022-07-15 01:50 234阅读 0赞

#  #

# [【react】父组件向子组件传值][react] #

父向子是用props，然后再子那边有一个监听函数

componentWillReceiveProps:function(nextProps){
            this.setState({
                visible:nextProps.visible,
                item:nextProps.item,
                value:nextProps.value,
                version:nextProps.version
            });
        },

父类调用子类的函数

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <script src="../../dist/react/react.js"></script>
        <script src="../../dist/react/JSXTransformer.js"></script>
        <script src="../../dist/jquery/jquery.min.js"></script>
        
        
    </head>
    <body>
    
    <div id="index-0331-0011"></div>
    <script type="text/jsx">
        var ButtonComment = React.createClass({
            getInitialState: function () {
                return {count:0};
            },
    
            sendSword: function () {
                var newCount = this.state.count + 1;
                this.setState({count:this.state.count + 1});
                this.props.getSwordCount();
            },
    
           render: function () {
               return (
                    <button onClick={this.sendSword}>{this.props.buttonName}</button>
               );
           }
        });
    
        var ImDaddyComponent = React.createClass({
            getInitialState: function () {
                return {sendCount:0};
            },
            sendSword: function () {
                this.refs.getSwordButton.sendSword();
            },
            getSwordCount: function () {
                this.setState({sendCount:this.refs.getSwordButton.state.count + 1});
            },
            render: function () {
                return (
                    <div>
                        <ButtonComment ref="getSwordButton" getSwordCount={this.getSwordCount} buttonName="儿子送宝刀"/>
                        <button onClick={this.sendSword}>通过老爸送宝刀</button>
                        <p>
                            父子俩共送{this.state.sendCount}把宝刀！！！
                        </p>
                    </div>
                );
            }
        });
    
        React.render(
                <ImDaddyComponent />,
                document.getElementById('index-0331-0011')
        );
    </script>
    </body>
    </html>

#     #

# [【react】子组件向父组件传值][react] #

reactjs是一枚新进小鲜肉，跟gulp搭配流行一段时间了。工作或者面试中经常遇到这样的问题，“子组件如何向父组件传值？”。其实很简单，概括起来就是：react中state改变了，组件才会update。父写好state和处理该state的函数，同时将函数名通过props属性值的形式传入子，子调用父的函数，同时引起state变化。子组件要写在父组件之前。具体写法看下面3个例子。

例子1.这里如下图，用户邮箱为父，绿色框为子。 父组件为用户输入的邮箱设好state，即“\{email: ''\}”，同时写好处理state的函数，即“handleEmail”，这两个名称随意起；再将函数以props的形式传到子组件，子组件只需在事件发生时，调用父组件传过来的函数即可。

![545055-20160901172841808-1770199726.png][]

//以下所有例子对应的html
    <body>
        <div id="test"></div>
    </body>

![复制代码][copycode.gif]

//子组件
    var Child = React.createClass({
        render: function(){
            return (
                <div>
                    请输入邮箱：<input onChange={
         this.props.handleEmail}/>
                </div>
            )
        }
    });
    //父组件，此处通过event.target.value获取子组件的值
    var Parent = React.createClass({
        getInitialState: function(){
            return {
                email: ''
            }
        },
        handleEmail: function(event){
            this.setState({email: event.target.value});
        },
        render: function(){
            return (
                <div>
                    <div>用户邮箱：{
         this.state.email}</div>
                    <Child name="email" handleEmail={
         this.handleEmail}/>
                </div>
            )
        }
    });
    React.render(
      <Parent />,
      document.getElementById('test')
    );

![复制代码][copycode.gif]

例子2.有时候往往需要对数据做处理，再传给父组件，比如过滤或者自动补全等等，下面的例子对用户输入的邮箱做简单验证，自动过滤非数字、字母和"@."以外的字符。

![545055-20160901184651824-417636944.png][]

![复制代码][copycode.gif]

//子组件，handleVal函数处理用户输入的字符，再传给父组件的handelEmail函数
    var Child = React.createClass({
        handleVal: function() {
            var val = this.refs.emailDom.value;
            val = val.replace(/[^0-9|a-z|\@|\.]/ig,"");
            this.props.handleEmail(val);
        },
        render: function(){
            return (
                <div>
                    请输入邮箱：<input ref="emailDom" onChange={
         this.handleVal}/>
                </div>
            )
        }
    });
    //父组件，通过handleEmail接受到的参数，即子组件的值
    var Parent = React.createClass({
        getInitialState: function(){
            return {
                email: ''
            }
        },
        handleEmail: function(val){
            this.setState({email: val});
        },
        render: function(){
            return (
                <div>
                    <div>用户邮箱：{
         this.state.email}</div>
                    <Child name="email" handleEmail={
         this.handleEmail}/>
                </div>
            )
        }
    });
    React.render(
      <Parent />,
      document.getElementById('test')
    );

![复制代码][copycode.gif]

例子3.如果还存在孙子组件的情况呢？如下图，黑框为父，绿框为子，红框为孙，要求子孙的数据都传给爷爷。原理一样的，只是父要将爷爷对孙子的处理函数直接传下去。

![545055-20160901185242777-119196007.png][]

![复制代码][copycode.gif]

//孙子，将下拉选项的值传给爷爷
    var Grandson = React.createClass({
        render: function(){
            return (
                <div>性别：
                    <select onChange={
         this.props.handleSelect}>
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </div>
            )
        }
    });
    //子，将用户输入的姓名传给爹  
    //对于孙子的处理函数，父只需用props传下去即可
    var Child = React.createClass({
        render: function(){
            return (
                <div>
                    姓名：<input onChange={
         this.props.handleVal}/>
                    <Grandson handleSelect={
         this.props.handleSelect}/>
                </div>
            )
        }
    });
    //父组件，准备了两个state，username和sex用来接收子孙传过来的值，对应两个函数handleVal和handleSelect
    var Parent = React.createClass({
        getInitialState: function(){
            return {
                username: '',
                sex: ''
            }
        },
        handleVal: function(event){
            this.setState({username: event.target.value});
        },
        handleSelect: function(event) {
            this.setState({sex: event.target.value});
        },
        render: function(){
            return (
                <div>
                    <div>用户姓名：{
         this.state.username}</div>
                    <div>用户性别：{
         this.state.sex}</div>
                    <Child handleVal={
         this.handleVal} handleSelect={
         this.handleSelect}/>
                </div>
            )
        }
    });
    React.render(
      <Parent />,
      document.getElementById('test')
    );

[react]: http://www.cnblogs.com/lixuemin/p/5754289.html
[545055-20160901172841808-1770199726.png]: /images/20220715/29c450b3138e439cb5f417d41e186ee9.png
[copycode.gif]: /images/20220715/32f89b8c46284da0ad1ee107581f289b.png
[545055-20160901184651824-417636944.png]: /images/20220715/e44672ce0b594873ab7d014e8444be31.png
[545055-20160901185242777-119196007.png]: /images/20220715/d035c20d147042a0bc089287d01d8b30.png