第1節(jié)：表單的事件響應(yīng)和bind復(fù)用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表單的事件響應(yīng)和bind復(fù)用</title>
<script src="./common/react.js"></script>
<script src="./common/react-dom.js"></script>
<script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
</head>
<body>
<div id="demo" >
<script type="text/babel">
var MyForm = React.createClass({
getInitialState:function(){
return{
username:'',
gender:'man',
checked:true
}
},
handleChange:function(name,event){
var newState={};
// checked 是ture,name=event.target.checked,如果是false,name=event.target.value.
console.log('event.target.checked:',event.target.checked);
console.log('event.target.value',event.target.value);
console.log('name',name);
newState[name]=name=="checked"?event.target.checked:event.target.value;
this.setState(newState);
console.log('newState:',newState);
},
render:function(){
return (<form onSubmit={this.submitHandler}>
<label htmlFor="username">情輸入您的姓名：</label>
<input type="text" name="username" onChange={this.handleChange.bind(this,"username")} value={this.state.username} id="username" />
<br/>
<label htmlFor="checkbox">是或否：</label>
<input type="checkbox" value="是否" name="checked" id="checkbox" onChange={this.handleChange.bind(this,"checked")} checked={this.state.checked} />
<br/>
<label htmlFor="username">請選擇</label>
<select name="gender" onChange={this.handleChange.bind(this,"gender")} value={this.state.gender}>
<option value="man">帥哥</option>
<option value="woman">美女</option>
</select>
<br/>
<button type="submit">提交</button>
</form>)
}
});
ReactDOM.render(<MyForm/>,document.getElementById('demo'))
</script>
</div>
</body>
</html>
事件響應(yīng)
表單組件可以通過設(shè)置onChange()回調(diào)函數(shù)來監(jiān)聽組件變化溯革。當(dāng)用戶的交互行文導(dǎo)致一下變化時，onChange()被執(zhí)行并通過瀏覽器做出響應(yīng)。
- <input>或<textarea>的value發(fā)生變化。
- <input>的checked狀態(tài)改變。
- <option>的selected 狀態(tài)改變乔妈。
bind復(fù)用
bind方法為事件相應(yīng)函數(shù)增加一個參數(shù)，事件響應(yīng)函數(shù)通過該參數(shù)識別事件源氓皱。
我們作一個文本框路召，并使用bind進行復(fù)用，我希望你自己可以親自動手敲一下代碼波材，加深對bind復(fù)用的理解股淡。
handleChange:function(name,event){
var newState={};
newState[name]=name=="checked"?event.target.checked:event.target.value;
this.setState(newState);
console.log(newState);
},
newState[name]=(name=="checked")?event.target.checked:event.target.value;
onChange={this.handleChange.bind(this,"username")
handleChange就這函數(shù)的調(diào)用.沒什么特別.
微信截圖_20180128224821.png
