React之this.refs, 实现数据双向绑定
1、实现数据双向绑定
将input组件与this.state属性绑定,要么是readonly, 要么使用onChange事件;
获取input元素的value值,有两种方式:
1) e.target.value
2) 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完成同步数据") }) } }
posted on 2019-12-11 14:50 wenbin_ouyang 阅读(1402) 评论(0) 编辑 收藏 举报