zoukankan      html  css  js  c++  java
  • React 实现数据双向绑定 事件的绑定以及传参 获取表单值的两种方法

    和 Vue 中差不多,vue 为页面上的元素提供了 ref 的属性,如果想要获取 元素引用,则需要使用 this.$refs.
    引用名称
    在 React 中,也有 ref , 如果要获取元素的引用    this.refs.    引用名称

    用  两种方法实现数据的  双向绑定,其实也是用  两种方法  获取表单数据  而已:

    具体代码如下:

                          {/* 使用ref也可以实现数据的双向绑定                         */}
    <input type="text" id="input" ref="ddd" className="form-control" onChange={this.ssss} value={this.state.a} required="required" />        

    双向绑定函数:

    // 双向绑定实现函数
        ssss = (e) => {
            this.setState({
                // 获取引用,重新赋值,实现绑定    这是第一种
                a: this.refs.ddd.value
            })
            // 打印ref所绑定的对象,进行观察
            console.log(this.refs.ddd)
    
            // 直接打印e对象,它的target是null
            console.log(e)
    
            // 先使用persist方法,再打印e对象进行观察
            e.persist()
            console.log(e)  这是第二种
        }

    打印结果具体如下:

    this.refs.ddd  直接获得该引用的dom对象
    而e参数 可以获得更多关于dom对象其他的内容,根据需要选择合适的使用。
  • 相关阅读:
    git将已存在的项目转换成git项目&托管git服务器
    联合索引
    MyISAM和InnoDb的关系
    NPOIHelper
    C# CRC各种转换
    appcloud 微信分享大图片
    C# 微信JSSDK 获取配置信息
    简易delegate委托
    GPS、谷歌、百度、高德坐标相互转换
    反射执行方法WINFROM
  • 原文地址:https://www.cnblogs.com/zqblog1314/p/12931119.html
Copyright © 2011-2022 走看看