ref转发到DOM元素

Vue

为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;