zoukankan      html  css  js  c++  java
  • react实现双向绑定

       双向绑定功能是在项目中比较常见的一个需求,传统的js实现方式是添加监听函数的方式,Vue框架实现很简单,因为它本身就是基于双向绑定实现的,接下来我将讲解一下如何使用react实现双向绑定的功能是

     首先了解一下status:state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致.React中,更新组件的state,会导致重新渲染用户界面(不要操作DOM).简单来说,就是用户界面会随着state变化而变化,常用的通知React数据变化的方法是调用setState(data,callback).这个方法会合并data到this.state,并重新渲染组件

       好了,接下来我们就可以基于state实现react的双向绑定功能了。首先,在input框(或其他组件)上绑定一个监听函数(例如:onchange={this.change.bind(this)}),触发监听函数后

    change(value){
       this.setState({
         name:value
       })
    }

    这样就会改变state,重新渲染,这样就会实现双向绑定的效果了

  • 相关阅读:
    apk反编译
    mysql 安装解读
    安卓=--确认
    安卓--界面--改变image view
    安卓--返回时,不丢失转态
    安卓--跳转
    安卓--菜单
    安卓--Toast
    设置网页上收藏夹的图标
    分帧标签
  • 原文地址:https://www.cnblogs.com/liyuanqing/p/7080595.html
Copyright © 2011-2022 走看看