频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
react中的逆向传输流实例讲解
2018-05-24 14:59:01         来源:qq_36529459的博客  
收藏   我要投稿

在react中提供的props只能进行单向传输流,但是在某些情况下,我们必须要从子组件发送信息到父组件,因此,我们可以进行函数来进行触发,从而达到逆向传输流。举个栗子~~~

class DemoOne extends React.Component {  
    handleVote(productId) {  
        const nextProducts = this.state.products.map((product) => {  
            if (product.id === productId) {  
                return Object.assign({}, product, {  
                    votes: product.votes + 1  
                })  
            } else {  
                return product;  
            }  
        });  
        this.setState({  
            products: nextProducts  
        })  
    }  
  
    render() {  
        return (  
            <p className="DemoOne">  
                <Product  
                    onVote={this.handleProductUpVote}  
                />  
            </p>  
        )  
    }  
}  

在上面的例子中,是一个投票系统,即,当点击的时候,如果点击的是和id相同,则将票数+1。接下来,我们来制作按钮,我将按钮放在子组件,这是一个逆向传输的经典例子。

class Product extends React.Component {  
    handleUpVote() {  
        this.props.onVote(this.props.id);  
    }  
    render() {  
        return (  
            <button onClick={this.handleUpVote}>  
                +1  
            </button>  
        )  
    }  
}  

在子组件中,通过在子组件中定义一个函数handleUpVote,而里面的内容,则是通过props来触发父组件的函数。注意:在这里,我是用新的函数间接的来触发父组件的函数,这时,我们在子组件中点击之后,父组件就会收到子组件发送的消息,实现数据跟新,从而达到react中逆向传输的目的。

点击复制链接 与好友分享!回本站首页
上一篇:vue的环境搭建教程
下一篇:CSS的三种基础选择器介绍
相关文章
图文推荐
文章
推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站