# 受控非受控組件
###### tags: `React` `Javascript`
> 差別 : 受控組件可以減少使用refs
* 非受控組件 : 將輸入類的Dom元素的輸入值隨著事件直接使用
=> 需要在標籤上寫refs綁定標籤到實例，最後才能取得輸入值

class Login extends React.Component{
    handleSubmit = (event)=>{
        event.preventDefault()
        const {name} = this
    }
    render(){
	    return(
		<form onSubmit={this.handleSubmit}>
		    用户名：<input ref={c => this.name = c}
                                 type="text" name="name"/>
			<button>submit</button>
		</form>
    )}
}
ReactDOM.render(<Login/>,document.getElementById('test'))

* 受控組件 : 將輸入類的Dom元素的輸入值保存到state中，並且使用時到state中取
=> 透過在dom標籤上加入事件可將輸入值直接寫入state

class Login extends React.Component{
	state = {
	    username:'',
	} 
    
        //以state來維護input的值
	saveUsername = (event)=>{
	    this.setState({username:event.target.value})
	}

	handleSubmit = (event)=>{
	    event.preventDefault()
	    const {username} = this.state
	}
	render(){
	    return (
	        <form onSubmit={this.handleSubmit}>
	            用户名：<input onChange={this.saveUsername} 
                                  type="text" name="username"/>
                            //直接在此綁定事件，將input值存入state。可避免ref
	            <button>登录</button>
	        </form>    )
        }
}