React input框数值绑定

1

import React from 'react'

export default class BindEvent extends React.Component{
    constructor(){
        super()
        this.state={
            msg:'dog'
        }
    }
    render(){
        return <div>
            <button className="btn btn-default" onClick={()=>{this.myclickHandler('pig','dog')}}>按钮</button>
            <hr/>
            <h3>{this.state.msg}</h3>
            <input type="text" value={this.state.msg} onChange={(e)=>this.textChanged(e)} />
        </div>
    }
    myclickHandler=(arg1,arg2)=>{
       this.setState({
           msg:'yellow dog'+arg1+arg2
       },function(){
           console.log(this.state.msg)
       })
    }
    textChanged=(e)=>{
        console.log(e.target.value)
        this.setState({
            msg:e.target.value
        })
    }
}

 

2 使用 this.ref

import React from 'react'

export default class BindEvent extends React.Component{
    constructor(){
        super()
        this.state={
            msg:'dog'
        }
    }
    render(){
        return <div>
            <button className="btn btn-default" onClick={()=>{this.myclickHandler('pig','dog')}}>按钮</button>
            <hr/>
            <h3>{this.state.msg}</h3>
            <input type="text" value={this.state.msg} onChange={(e)=>this.textChanged(e) } ref="txt" />
        </div>
    }
    myclickHandler=(arg1,arg2)=>{
       this.setState({
           msg:'yellow dog'+arg1+arg2
       },function(){
           console.log(this.state.msg)
       })
    }
    textChanged=(e)=>{
        console.log(this.refs.txt.value)
        this.setState({
            msg:e.target.value
        })
    }
}