第1节：表单的事件响应和bind复用
<!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>表单的事件响应和bind复用</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>
事件响应
表单组件可以通过设置onChange()回调函数来监听组件变化。当用户的交互行文导致一下变化时，onChange()被执行并通过浏览器做出响应。
- <input>或<textarea>的value发生变化。
- <input>的checked状态改变。
- <option>的selected 状态改变。
bind复用
bind方法为事件相应函数增加一个参数，事件响应函数通过该参数识别事件源。
我们作一个文本框，并使用bind进行复用，我希望你自己可以亲自动手敲一下代码，加深对bind复用的理解。
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就这函数的调用.没什么特别.
微信截图_20180128224821.png
