React（4）事件处理-蒲公英云

React（4）事件处理

r囧r小猫 2022-05-31 08:08 351阅读 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
        })
    }
}

阻止默认事件：

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

React 事件函数的特点：

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

事件的传参：

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

【方法一】

返回通过 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
        })
    }
}