React（4）事件处理

r囧r小猫 2022-05-31 08:08 221阅读 0赞

### 10、事件处理 ###

> 事件的 this

注意，事件触发的 this，默认指向的 undefined；

所以请手动绑定 this 给事件相应函数。比如：

this.clickCount = this.clickCount.bind(this)

> onChange 事件

输入框获取修改后的值，通过 `onChange` 事件。

假如事件的参数是 `e`，那么 `e.target` 获取到当前 DOM（即这个 `<input>` 标签），然后 `e.target.value` 获取输入框的值。

但这个时候修改是无效的，因此必须通过 `this.setState()` 来修改值。

> onClick事件

绑定点击事件，通过 `onClick` 事件。

参数同上，一个道理，但这里不需要。

> 其他事件

略，事件名和原理是一样的

class HelloWord extends React.Component { 
        constructor(props) {
            super(props);
            // 通过 state 设置组件变量
            this.state = {
                count: 0,
                bindValue: ''
            }
            // 在这里手动绑定 this，原因是不绑定的话，this 将指向 undefined
            this.clickCount = this.clickCount.bind(this)
            this.changeValue = this.changeValue.bind(this)
        }
    
        // 渲染函数，this 指向实例本身
        render() {
            return <div>
                {
       /* onClick 注意是驼峰写法 */}
                <button onClick={
       this.clickCount}>点击我增加一次点击计数</button>
                <p>你已经点击了{
       this.state.count}次</p>
                这个输入框的值和上面的点击次数绑定了，因此无法被手动修改<input type="text" value={
       this.state.count}/>
                {
       /* 下面这个br标签，必须是闭合标签写法，否则会报错 */}
                <br/>
                <input type="text" value={
       this.state.bindValue} placeholder='请在这里输入值' onChange={
       this.changeValue}/>
                <br/>
                上面输入框的值是：{
       this.state.bindValue}
            </div>
        }
    
        clickCount() {
            this.setState({
                count: this.state.count + 1
            })
        }
    
        changeValue(e) {
            // e.target 拿到 输入框这个DOM，然后value属性拿到修改后的值
            var newValue = e.target.value
            console.log(newValue)
            // 需要通过 setState 来修改值才能生效
            this.setState({
                bindValue: newValue
            })
        }
    }

**阻止默认事件：**

1.  阻止默认事件，需要通过 `e.preventDefaul()` 来实现（e 是事件的回调函数的参数）

**React 事件函数的特点：**

1.  事件参数是一个合成事件。React 根据 W3C spec 来定义这些合成事件，所以你不需要担心跨浏览器的兼容性问题；
2.  在 render 里，写成 `this.xx`，但是这个事件执行时的 this 是 undefined，所以需要手动绑定（`bind`）；

**事件的传参：**

1.  原则上，就是返回一个带参数的函数；

【方法一】

返回通过 `bind` 绑定了 this 和 参数的函数;

需要注意的是，事件参数无需添加，会被默认后置到最后一个参数的位置：

class HelloWord extends React.Component { 
        constructor(props) {
            super(props);
            this.state = {
                count: 0
            }
        }
    
        // 渲染函数，this 指向实例本身
        render() {
            return <div>
                {
       /* 这种方法省略了 this 绑定的过程 */}
                <button onClick={
       this.clickCount.bind(this, 5)}>增加count</button>
                <br/>
                计数器二：{
       this.state.count}
            </div>
        }
    
        clickCount(number, e) {
            // 先是自定义参数，最后一个是事件参数
            console.log(arguments)
            this.setState({
                count: this.state.count + number
            })
        }
    }

【方法二】

参数是一个函数，这个函数里执行了你准备执行的那个函数。

核心思想是：参数函数被执行 ——> 参数函数里执行了原本预期执行的函数 ——> 预期执行的函数里，放置了需要的参数

如代码：

class HelloWord extends React.Component { 
        constructor(props) {
            super(props);
            this.state = {
                count: 0
            }
        }
    
        // 渲染函数，this 指向实例本身
        render() {
            return <div>
                {
       /* 这种方法省略了 this 绑定的过程 */}
                <button onClick={e => this.clickCount.call(this, 5, e)}>增加count</button>
                <br/>
                计数器二：{
       this.state.count}
            </div>
        }
    
        clickCount(number, e) {
            // 先是自定义参数，最后一个是事件参数
            console.log(arguments)
            this.setState({
                count: this.state.count + number
            })
        }
    }