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對象其他的內容，根據需要選擇合適的使用。