受控组件

受控组件

• 受控组件：组件的状态是可控制的
• 非受控组件：组件的状态是不可控制的
• 小练习：实现输入框输入，同步显示在下方区域

写死的value就是非受控的，根据ref来监测输入框的状态，达到组件受控效果

class App extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            "msg": "哈哈哈"
        };
        this.handlechange = this.handlechange.bind(this)
    }
    handlechange(event){
        let msg = event.target.value;
        this.setState({msg})
    }
    render(){
        let {msg} = this.state;
        console.log(msg)
        return(
            <form >
                <input onChange={this.handlechange} ref="msg" value={msg} />
                <p>{msg}</p>
            </form>
        )
    }
}

// 渲染组件
ReactDOM.render(<App />,document.getElementById("example") )