React 实现数据双向绑定事件的绑定以及传参获取表单值的两种方法

时间：2020-05-21 16:37:58 阅读：74 评论：0 收藏：0 [点我收藏+]

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

引用名称

在 React 中，也有 ref , 如果要获取元素的引用 this.refs. 引用名称

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

具体代码如下：

                      {/* 使用ref也可以实现数据的双向绑定             e就是当前dom对象，也就是input对象             */}
<input type="text" id="input" ref="ddd" className="form-control" onChange={(e) => this.ssss(e)} value="" 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)　　这是第二种
    }