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;