ref转发到DOM元素

为DOM元素添加ref属性

<div id="app">
    <input type="text" ref="inputRef" >
    <button @click="result">结果</button>
  </div>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>

  <script>
    let vm = new Vue({
      el: '#app',
      methods: {
        result () {
          console.log(this.$refs.inputRef.value)
        }
      }
    })
  </script>
复制代码

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

<div id="app">
    <input type="text" :value="value" @change="change" />
    <button @click="result">结果</button>
  </div>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>

  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        value: ''
      },
      methods: {
        result () {
          console.log(this.value)
        },
        change (e) {
          this.value = e.target.value
        }
      }
    })
  </script>
复制代码

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

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

<div id="app">
    <input type="text" v-model="value" />
    <button @click="result">结果</button>
  </div>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>

  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        value: ''
      },
      methods: {
        result () {
          console.log(this.value)
        }
      }
    })
  </script>
复制代码

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 (
      <div>
        <input type="text" ref={this.inputRef} />
        <button onClick={this.result}>结果</button>
      </div>
    );
  }
}

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 (
      <div>
        <input type="text" value={this.state.value} onChange={this.change}  />
        <button onClick={this.result}>结果</button>
      </div>
    );
  }
}
export default App;
复制代码