ref转发到DOM元素

Vue

为DOM元素添加ref属性

 

    
    结果
  
  

  

如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。

  

    
    结果
  
  

  

Vue提供了双向数据绑定的语法v-model，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据。

text 和 textarea 元素使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；

  

    
    结果
  
  

  

React

为DOM元素添加ref属性

import React, { Component } from 'react';

class App extends Component {
  constructor (props) {
    super();
    this.state = {
      value: ''
    }
    this.inputRef = React.createRef()
  }
  result = () => {
    console.log(this.inputRef.current.value)
  }
  render() {
    return (
      

        
        结果
      
    );
  }
}

export default App;

在React中有非受控组件的概念，非受控组件表示将真实数据储存在 DOM 节点中，使用 ref 从 DOM 节点中获取表单数据。

在React中有受控组件的概念，受控组件表示将表单数据是由 React 组件来管理的。可变的状态通常保存在组件的状态属性中，并且只能用 setState() 方法进行更新。

import React, { Component } from 'react';

class App extends Component {
  constructor (props) {
    super();
    this.state = {
      value: ''
    }
  }
  result = () => {
    console.log(this.state.value)
  }
  change = (e) => {
    this.setState({
      value: e.target.value
    })
  }
  render() {
    return (
      

        
        结果
      
    );
  }
}
export default App;