React中事件的处理

Posted -muzi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React中事件的处理相关的知识,希望对你有一定的参考价值。

React 中使用 onClick 类似的写法来监听事件,注意 this 绑定问题 React 里严格遵循单项数据流,没有数据双向绑定,所以要处理两件事,第一是元素本身值的赋值,第二是值改变以后的事件,例如输入框需要设置 valueonChange
1.在 src -> components 文件夹中,再新建 CartSample.js ,具体代码如下:

import React, { Component } from 'react';

export default class CartSample extends Component {
    //  状态的初始化一般放在构造器中
    constructor(props){
        super(props);
        this.state = {
            text: ''
        }
        // 为了在回调中使用 `this`,这个绑定是必不可少的
        this.textChange = this.textChange.bind(this)
    }
    // 当 input 的值 text 发生变化的时候,我们让 textChang 去切换 input 的值
    textChange (event){
        this.setState({text: event.target.value})
    }
    render() {
        return (
            <div>
                {/* 事件处理 */}
                <div>
                    <input type="text" value={this.state.text} onChange={this.textChange}/> 
                </div>
            </div>
        );
    }
}

注意:

  • React 事件的命名采用小驼峰式(camelCase),而不是纯小写。且事件名称之后不能加 (),否则会直接执行
  • 不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault

2.然后在 src -> index.js 导入组件,并引用组件,查看结果,input 可以正常的输入值就是没有问题的。

我们必须谨慎对待 JSX 回调函数中的 this ,在 javascript 中,class 的方法默认不会绑定 this 。如果你忘记绑定 this.textChange 并把它传入了 onChange ,当你调用这个函数的时候 this 的值为 undefined。
如果你觉得使用 bind 很麻烦,还可以使用 箭头函数
下面我们写一个添加并展示商品列表的功能,把 input 输入框的值添加到商品列表的数组中,并把列表展示到页面,具体代码如下:

import React, { Component } from 'react';
export default class CartSample extends Component {
    //  状态的初始化一般放在构造器中
    constructor(props){
        super(props);
        this.state = {
            text: '',
            goods: []
        }
        this.textChange = this.textChange.bind(this)
    }
    // 当 input 的值 text 发生变化的时候,我们让 textChang 去切换 input 的值
    textChange (event){
        this.setState({text: event.target.value})
    }
    addGoods = () => {
        this.setState(prevstate => {
            // prevstate.goods.push({
            //     id: prevstate.goods.length + 1,
            //     name: prevstate.text
            // })
            // react 官方希望传入与返回的对象不应该是同一个对象
            return {
                goods: [
                    ...prevstate.goods,
                    {
                        id: prevstate.goods.length + 1,
                        name: prevstate.text
                    }
                ]
            }
        })
    }
    render() {
        return (
            <div>
                {/* 事件处理 */}
                <div>
                    <input type="text" value={this.state.text} onChange={this.textChange}/> 
                    <button onClick={this.addGoods}>添加商品</button>
                </div>
                <ul>
                   {this.state.goods.map((good) => <li key={good.id}> {good.name} </li>)}
                </ul>
            </div>
        );
    }
}

解析:

addGoods 中,因为我们添加商品的时候需要拿到之前的 goods 数组,并且在点击添加商品按钮时再往 goods 数组添加新的商品,此时因为我们需要依赖于之前的值,所以用 prevstate ,可能你想到的是用 push ,上面代码也有,但是因为这种写法不符合 React 官方希望,React 希望我们传入与返回的对象不应该是同一个对象,比如在这个例子中我们想要更新的 goods 数组,需要是个全新的数组,而不是之前的那个,这就要求我们需要把之前数组的值加进来,然后再把 新的项 加入数组中,也就是代码中的写法。

以上是关于React中事件的处理的主要内容,如果未能解决你的问题,请参考以下文章

将数据从片段发送到活动,无需任何事件处理或侦听器

无法理解react.js中的处理事件[关闭]

自己写的一个React事件流处理框架

无法在事件处理程序中访问 React 实例(this)[重复]

React事件处理

将多个参数传递给 React 中的事件处理程序