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

发布时间：2020-12-15 08:22:25 所属栏目：百科来源：网络整理

导读：【react】父组件向子组件传值父向子是用props，然后再子那边有一个监听函数 componentWillReceiveProps:function(nextProps){ this.setState({ visible:nextProps.visible,item:nextProps.item,value:nextProps.value,version:nextProps.version }); }, 父

【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>
    <!--如下的这种引用方式是不正确的，必须使用上面的引用方式-->
    <!--<script src="../../dist/react/JSXTransformer.js"/>-->
</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】子组件向父组件传值

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

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

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

子组件
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('')
);

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

子组件，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); },255); line-height:1.5!important">return ( <div> 请输入邮箱：<input ref=emailDom" onChange={this.handleVal}/> </div> ) } }); 父组件，通过handleEmail接受到的参数，即子组件的值 this.setState({email: val}); },255); border:none!important">

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!