(1).通过onXxx属性指定事件处理函数(注意大小写)
a.React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 —————— 为了更好的兼容性
b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ————————为了的高效
(2).通过event.target得到发生事件的DOM元素对象 (发生事件的元素是要操作得元素)——————————不要过度使用ref
受控组件:表单元素通常自己维护 state,并根据用户输入进行更新。而在 React 中,可变状态(mutable state)通常保存在组件的 state 属性中,并且只能通过使用 setState()来更新。将两者结合起来,每当表单的状态发生改变时,都被写入到组件的state中,使 React 的 state 成为“唯一数据源”。
非受控组件:
class Login extends React.Component{
handleSubmit=(event)=>{
event.preventDefault()//阻止事件的默认行为
//现用现取
const {username,password}=this
console.log(username.value,password.value)
}
render(){
return (
<form onSubmit={this.handleSubmit}>
用户名:<input ref={(c)=>{this.username=c}} type="text" name="username"/>
密码:<input ref={(c)=>{this.password=c}} type="password" name="password"/>
<button>登录</button>
</form>
)
}
}
ReactDOM.render(<Login/>,document.getElementById("test"))
</script>
受控组件:表单数据将交由 DOM 节点来处理,通常借助ref来从 DOM 节点中获取表单数据。。
class Login extends React.Component{
//初始化状态
state = {
username:'', //用户名
password:'' //密码
}
//保存用户名到状态中
saveUsername = (event)=>{
this.setState({username:event.target.value})
}
//保存密码到状态中
savePassword = (event)=>{
this.setState({password:event.target.value})
}
//表单提交的回调
handleSubmit = (event)=>{
event.preventDefault() //阻止表单提交
const {username,password} = this.state
alert(`你输入的用户名是:${username},你输入的密码是:${password}`)
}
render(){
return(
<form onSubmit={this.handleSubmit}>
用户名:<input onChange={this.saveUsername} type="text" name="username"/>
密码:<input onChange={this.savePassword} type="password" name="password"/>
<button>登录</button>
</form>
)
}
}
//渲染组件
ReactDOM.render(<Login/>,document.getElementById('test'))