[A] 基本逻辑
1. 通过onXxx属性指定事件处理函数(注意大小写)
a. React使用的式自定义(合成)事件，而不是使用的原生的DOM事件 -- 为了更好的兼容
b. React中的事件通过事件委托的方式处理(委托给最外层的元素) -- 为了更高效
2. 通过event.target得到发生事件的DOM元素对象
[B] 基础使用 class Demo extends React.Component {
state = {}
showDate = (event) => {
console.log('event.target.value', event.target.value)
}
render() {
return (
<div>
<input onBlur={this.showDate} type="text" />
</div>
)
}
}
ReactDOM.render(<Demo />, document.getElementById('box'))
触发过程：
标签元素上通过onXxx绑定事件，当事件触发时，React会自动将点击事件本身当做默认参数传入事件中
[C] 高阶函数
定义：
如果一个函数符合下面2个规范的任何一个，那么该函数就是高阶函数
1) 若 A 函数，接受的参数是一个函数，那么 A 函数就是一个高阶函数
2) 若 A 函数，调用后的返回值是一个函数，那么 A 函数就是一个高阶函数
常见的高阶函数有：
Promise，setTimeout, arr.map()等
[D] 函数柯里化
通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。
[E] 受控组件
案例：
class Demo extends React.Component {
toSubmit = (event) => {
event.preventDefault()
const { usernameRef, passwordRef } = this
console.log(`你输入的用户名是: ${usernameRef.value}, 你输入的密码是: ${passwordRef.value}`)
}
render() {
return (
<div>
<form action="#">
<input ref={ c => { this.usernameRef = c }} type="text" placeholder="请输入用户名" />
<input ref={ c => { this.passwordRef = c }} type="password" placeholder="请输入密码" />
<button onClick={this.toSubmit}>提交</button>
</form>
</div>
)
}
}
ReactDOM.render(<Demo />, document.getElementById('box'))
受控组件特点：
现用现取，即提交的时候，先获取到需要的数据，然后再去提交
[F] 非受控组件
案例：
class Demo extends React.Component {
state = {
username: '1',
password: '2'
}
saveInfo(type) {
return (event) => {
this.setState({
[type]: event.target.value
})
}
}
toSubmit = (event) => {
event.preventDefault()
const { username, password } = this.state
console.log(`你输入的用户名是: ${username}, 你输入的密码是: ${password}`)
}
render() {
return (
<div>
<form action="#">
<input onBlur={this.saveInfo('username')} type="text" placeholder="请输入用户名" />
<input onBlur={this.saveInfo('password')} type="password" placeholder="请输入密码" />
<button onClick={this.toSubmit}>提交</button>
</form>
</div>
)
}
}
ReactDOM.render(<Demo />, document.getElementById('box'))
案例的非柯里化实现：
1. 上述案例中，由于绑定的事件直接传入参数后，onBlur获取到的是函数执行的结果，
因此this.saveInfo必须返回一个函数，并且将event事件作为这个返回函数的入参才能实现所需要的效果
这种函数返回函数的写法我们称之为函数的柯里化
2. 而实际上，不适用柯里化，我们也可以实现上述功能
此时我们需要给onBlur绑定一个箭头函数，在这个箭头函数内部去调用事件，即可实现上述效果
实现代码：
class Demo extends React.Component {
state = {
username: '1',
password: '2'
}
saveInfo(type, event) {
this.setState({
[type]: event.target.value
})
}
toSubmit = (event) => {
event.preventDefault()
const { username, password } = this.state
console.log(`你输入的用户名是: ${username}, 你输入的密码是: ${password}`)
}
render() {
return (
<div>
<form action="#">
<input onBlur={event => {this.saveInfo('username', event)}} type="text" placeholder="请输入用户名" />
<input onBlur={event => {this.saveInfo('password', event)}} type="password" placeholder="请输入密码" />
<button onClick={this.toSubmit}>提交</button>
</form>
</div>
)
}
}
非受控组件特点：
组件中所有属性的变化首先存放在state状态中，当需要使用的时候，再去state状态中去获取
标签：触发,函数,render,state,事件,005,password,type,event From： https://www.cnblogs.com/carreyBlog/p/16776642.html