React 之 受控组件 input

受控组件

import React,{ Component } from 'react'

class Index extends Component{
    constructor(props){
        super(props)
        this.state={
            inputVal:''
        }
        //绑定
        this.handInputWatch=this.handInputWatch.bind(this)
    }
    handInputWatch(ev){
        let{ value }=ev.target
        this.setState({
            inputVal:value
        })
        // console.log(1)
    }
    render(){
        let {handInputWatch}=this
        let{ inputVal }=this.state
        return(
            <div>
                <input type="text" onChange={handInputWatch}/>
                 {/*在input中 我们可以随便自由的输入任何东西，这一切看起来很正常，但是React容不下它。因为React视图的更新是基于state的变化而变化的。但是现在input的变化我们并没有更新节点setState,也就说这里的变化本身具有的功能，并非收到了react的控制而发生变化的，所以我们说这个时候的input是非受控状态*/}
                <p>{ inputVal }</p>
            </div>
        )
    }
}

export default Index