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

最新推荐文章于 2024-05-14 16:05:47 发布

masterShaw

最新推荐文章于 2024-05-14 16:05:47 发布

阅读量1.1w

点赞数 1

分类专栏： react 文章标签： React

react 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

【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('test')
);

例子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);
    },
    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')
);

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

//孙子，将下拉选项的值传给爷爷
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')
);

masterShaw

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
react 父子组件之间的通信和函数调用

【react】父组件向子组件传值父向子是用props，然后再子那边有一个监听函数componentWillReceiveProps:function(nextProps){ this.setState({ visible:nextProps.visible, item:nextProps.item,
复制链接

扫一扫