一. 非受控組件,現用現?。ㄋ斜韱沃休斎肟?,選擇框的值)
class Login extends React.Component{ handleSubmit = (event)=>{ event.preventDefault(); //阻止表單的提交事件 阻止默認事件 const {username,userpwd} = this console.log(username.value,"----",userpwd.value); return false; } render(){ return ( <form action="http://www.smokestackpainting.com" onSubmit={this.handleSubmit}> 用戶名: <input ref={c=>this.username=c} type="text" /> 密碼: <input ref={c=>this.userpwd=c} type="password" /> <button>登陸</button> </form> ) } }
二. 受控組件: 隨著值的改變,自動存儲到state中,需要用時,直接到this.state中取
class Login extends React.Component{ //初始化狀態 state = { username:'', userpwd :'' } //保存用戶名到狀態中 saveUsername = (event)=>{ //console.log(event.target.value); this.setState({username:event.target.value}) } saveUserpwd = (event)=>{ //console.log(event.target.value); this.setState({userpwd:event.target.value}) } handleSubmit = (event)=>{ event.preventDefault(); //阻止表單的提交事件 阻止默認事件 const {username,userpwd} = this.state console.log(`你的用戶名是:${username}, 密碼是: ${userpwd}`); } render(){ return ( <form action="http://www.smokestackpainting.com" onSubmit={this.handleSubmit}> 用戶名: <input onChange={this.saveUsername} type="text" /> 密碼: <input onChange={this.saveUserpwd} type="password" /> <button>登陸</button> </form> ) } }