React之this.refs, 实现数据双向绑定

import React from 'react'export default class Hello6 extends React.Component {
constructor() {
super()
this.state = {
msg: '测试数据双向绑定'
}
}
render() {
return <div>
基于class创建组件, {this.props.id} + '--' + {this.props.name}
<h4>{this.state.msg}</h4>
{/* 将input组件与this.state属性绑定，要么是readonly, 要么使用onChange事件 */}
{/* <input type="text" name="msg" value={this.state.msg} onChange={ (e) => this.inputChangeHandler(e) } ref="btn" /><br/><br/> */}
<input type="text" name="msg" value={this.state.msg} onChange={ (e) => this.inputChangeHandler(e) } ref={input=> this.msgInputObj = input} /><br/><br/>
{/* 测试点击事件 */}
<button id="btn" onClick={ () => this.myOnclickHandler(this.state.msg) }>测试点击事件</button> </div>
} myOnclickHandler = (msg) => {
console.log(msg)
console.log(this.state.msg)
this.setState({msg:'msg被修改了。。。'}, function () {
console.log(this.state.msg)
})
} inputChangeHandler = (e) => {
// 获取input的value属性的第一种方式
// console.log(e.target.value) // 获取input的value属性的第二种方式
// 使用ref获取元素的引用
// console.log(this.refs.btn.value)
// 获取input的value属性第三种方式
console.log(this.msgInputObj.value)
// 同步数据
const newVal = e.target.value
this.setState({msg: newVal}, function() {
console.log("调用this.state完成同步数据")
})
}}