码迷,mamicode.com
首页 > 其他好文 > 详细

react数据双向绑定(记录)

时间:2020-03-11 21:00:11      阅读:67      评论:0      收藏:0      [点我收藏+]

标签:turn   com   src   color   img   input   技术   inpu   targe   


class DataBinding extends React.Component {
    constructor() {
        super()
        this.state = {
            userName: ‘双向绑定‘
        }
    }
    // --------------- e.target
    inputChange = e => {
        this.setState({
            userName: e.target.value
        })
    }
    getData = () => {
        alert(this.state.userName)
    }
    // ---------------- ref
    inputCha =() => {
        let val = this.refs.username.value
        this.setState({
            userName: val
        })
    }
    getUser = () => {
        alert(this.state.userName)
    }
    render() {
        return (
            <div>
                <input value={this.state.userName} onChange={this.inputChange}></input>
                <button onClick={this.getData}>点击获取</button>
                <p>{this.state.userName}</p>
                <input ref="username" value={this.state.userName} onChange={this.inputCha}/>
                <button onClick={this.getUser}>点击获取</button>
            </div>
        )
    }
}

技术图片

 

react数据双向绑定(记录)

标签:turn   com   src   color   img   input   技术   inpu   targe   

原文地址:https://www.cnblogs.com/yangisme/p/12465285.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!