本文已参与「新人创作礼」活动，一起开启掘金创作之路
第一节：事件处理
- 通过onXxx属性指定事件处理函数(onclick===>onClick)
a) 为了更好的兼容性：React使用的是自定义(合成事件,而不是使用的原生DOM事件)
b) 为了更高效：React中的事件是通过事件委托的方式处理的
2. 当发生事件的事件源与操作源相同时，通过event.target得到发生事件的DOM元素对象。
发生事件源的要操作自身属性的时候 不要用ref
第二节：非受控组件
class Demo extends React.Component{
showdata = (event)=>{
event.preventDefault();//阻止默认事件
let {username,password} = this;
alert(username.value +"-" + password.value);
}
render(){
return (
<form action="" onSubmit={this.showdata}>
用户名： <input ref={v => this.username = v} type="text" name="username"/><br/>
密 码：<input ref={v => this.password = v} type="password" name="password"/><br/>
<input type="submit" name="dosubmit" value="提交信息"/>
</form>
);
}
}
ReactDOM.render(<Demo/>,document.getElementById("hello"));
第三节：受控组件
class Demo extends React.Component{
//初始化状态
state = {username:'',password:''};
saveusername = (event)=>{
this.setState({username:event.target.value});
}
savepassword = (event)=>{
this.setState({password:event.target.value});
}
showdata = (event)=>{
event.preventDefault();//阻止默认事件
let {username,password} = this.state;
alert(username + '-' + password);
}
render(){
return (
<form action="" onSubmit={this.showdata}>
用户名： <input onChange={this.saveusername} type="text" name="username"/><br/>
密 码：<input onChange={this.savepassword} type="password" name="password"/><br/>
<input onChange={this.savepassword} type="submit" name="dosubmit" value="提交信息"/>
</form>
);
}
}
ReactDOM.render(<Demo/>,document.getElementById("hello"));
总结：就形式上来说，受控组件就是为某个form表单组件添加value属性；非受控组件就是没有添加value属性的组件
