3.React事件处理、收集表单数据、高阶函数
3.1事件处理
class Demo extends React.Component {
/*
1. 通过onXxx属性指定事件处理函数(注意大小写)
a) React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
----为了更好的兼容性
b) React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
----为了高效
2. 通过event.target得到发生事件的DOM元素对象
----不要过度使用ref
*/
// 创建ref容器
myRef = React.createRef()
showData = () => {
console.log(this.myRef.current)
alert(this.myRef.current.value)
}
// 回到函数接收一个事件源
showData2 = (event) => {
console.log(event.target)
alert(event.target.value)
}
render(){
return (
<div>
<label>
<input ref={this.myRef} type="text" placeholder="点击按钮显示数据" />
</label>
<button onClick={this.showData}>点我提示左侧的数据</button>
{/* 要取的数据在发生事件的事件源，可以省略ref */}
<input onBlur={this.showData2} type="text" placeholder="失去焦点显示数据" />
</div>
)
}
}
ReactDOM.render(<Demo />, document.getElementById('test'))
3.2 非受控组件
class Login extends React.Component {
// 非受控: 现用现取不通过state更新
handleSubmit = (event) => {
event.preventDefault() // 阻止表单提交
const {username, password} = this
alert(`${username.value}, ${password.value}`)
}
render(){
return (
<form action="http://www.baidu.com" 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>
)
}
}
3.3 受控组件
class Login extends React.Component {
// 初始化状态
state = {
username: '',
password: ''
}
handleSubmit = (event) => {
event.preventDefault() // 阻止表单提交
const {username, password} = this.state
alert(`${username}, ${password}`)
}
// 受控： 随着输入立刻更新状态
saveUsername = (event) => {
this.setState({
username: event.target.value
})
}
savePassword = (event) => {
this.setState({
password: event.target.value
})
}
render(){
return (
<form action="http://www.baidu.com" onSubmit={this.handleSubmit}>
用户名： <input onChange={this.saveUsername} type="text" name="username"/>
密码： <input onChange={this.savePassword} type="password" name="password"/>
<button>登录</button>
</form>
)
}
}
3.4函数柯里化（高阶函数）
/*
高阶函数：符合以下之一，即为高阶函数
1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数
2.若A函数，调用后的返回值依然是一个函数，那么A即可以称之为高阶函数
常见的高阶函数有 Promise，setTimeout， arr.map()
函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收函数最后统一处理的函数编码形式
function sum(a) {
return (b) => {
return (c) => {
return a + b + c
}
}
}
const result = sum(1)(2)(3)
console.log(result)
* */
class Login extends React.Component {
// 初始化状态
state = {
username: '',
password: ''
}
// 受控： 随着输入立刻更新状态
handleSubmit = (event) => {
event.preventDefault() // 阻止表单提交
const {username, password} = this.state
alert(`${username}, ${password}`)
}
// 保存表单数据到状态中
saveFormData = (dataType) => {
// 返回一个回调函数给onChange，接收event事件
return (event) => {
// console.log(dataType)
// console.log(event.target.value)
this.setState({
[dataType]: event.target.value
})
}
}
render(){
return (
<form action="http://www.baidu.com" onSubmit={this.handleSubmit}>
用户名： <input onChange={this.saveFormData('username')} type="text" name="username"/>
密码： <input onChange={this.saveFormData('password')} type="password" name="password"/>
<button>登录</button>
</form>
)
}
}
3.5 不使用函数柯里化实现
class Login extends React.Component {
// 初始化状态
state = {
username: '',
password: ''
}
// 受控： 随着输入立刻更新状态
handleSubmit = (event) => {
event.preventDefault() // 阻止表单提交
const {username, password} = this.state
alert(`${username}, ${password}`)
}
// 保存表单数据到状态中
saveFormData (event, dataType) {
console.log(this)
this.setState({
[dataType]: event.target.value
})
}
render(){
return (
<form action="http://www.baidu.com" onSubmit={this.handleSubmit}>
{/*其实就是将回调函数抽出来写到这*/}
用户名： <input onChange={(event) => {this.saveFormData(event, 'username')}} type="text" name="username"/>
密码： <input onChange={(event) => {this.saveFormData(event, 'password')}} type="password" name="password"/>
<button>登录</button>
</form>
)
}
}
