javascript - 父组件与多个子组件之通信
巴扎黑
巴扎黑 2017-04-10 17:11:33
[JavaScript讨论组]

目前的问题是这样的:

一表单父组件,中有多个input输入框,然每一个input输入框是已封装好的组件,现在我的需求是想获取这多个input组件的输入值,并传入表单父组件的state中去。

我知道父组件获取子组件的数据的方式之一可以是父组件传入子组件一个自己的方法,子组件获取值之后再调用父组件传入的方法,把值作为参数传入。

但是现在有多个input子组件,要怎么处理才能把子组件的值同时传入父组件的一个方法中呢?

父组件(之前用的是表单元素input,和textarea,改成封装后的组件就不能正确获取数据了):

class Activity extends React.Component{

    constructor(){
        super();
        this.state={
            title : null, 
            brief : null
        };
    }

    handleChange(){
        this.setState({
            title : this.refs.title.value,
            brief : this.refs.brief.value
        });
    }

    render(){
        return(
                    
                
天蓬老师

各个子组件在输入发生变更的时候,发送change事件
父组件监听change事件,来收集各个子组件的值
父子组件之间通过事件脱耦~

PHP中文网

如果只是目前这个应用场景的话,我觉得 @kikong 的做法是比较好的选择。

如果真要在父子组件间传递数据的话,可以用context属性。

官网介绍

一篇blog

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号