React学习之旅Part7：React绑定事件和使用setState()修改state的数据、React实现双向数据绑定

最新推荐文章于 2022-03-07 11:10:49 发布

Piconjo_Official

最新推荐文章于 2022-03-07 11:10:49 发布

阅读量2.1k

点赞数 1

分类专栏：前端文章标签： react js javascript jsx reactjs

本文链接：https://blog.csdn.net/Piconjo/article/details/106635590

版权

本文详细介绍了在React中如何绑定事件，包括使用箭头函数的标准语法，以及如何修改state数据，强调了使用this.setState()的重要性。此外，还讲解了React中的数据绑定，特别是如何手动实现双向数据绑定，包括监听onChange事件、获取最新值以及同步到state中的步骤。

摘要由CSDN通过智能技术生成

一、绑定事件

在React中所绑定的事件的名称都是由React提供的因此事件名称必须按照一定的规范
名称的首字母必须是大写的(即小驼峰命名法) 例如onClick或onMouseEnter

且在为事件绑定函数的时候必须用花括号包裹而不能为字符串类型
例如：

<button onClick={
   function(){
   console.log("aaa")}}>click me</button>

但行内式不太方便可以将函数进行抽离
像这样：

import React from 'react';

export default class Hello extends React.Component
{
   
    constructor()
    {
   
        super();
        this.state={
   }
    }

    render()
    {
   
        return <div>
            hello
            <hr/>
            <button onClick={
   this.myClick}>click me</button>
        </div>
    }

    // 组件内部的实例方法
    myClick()
    {
   
        console.log("aaa")
    }
}

需要注意的是：在调用方法的时候要用this来指定因为是在组件的内部调用自己的方法
加上this 代表将组件内的实例方法的引用交给绑定的事件
且不能带有括号() 否则当React解析到该方法的调用时该方法会被直接执行

但更标准的语法是使用【箭头函数】：

箭头函数是匿名的function函数(即没有函数名的函数)
在箭头函数内部 this永远指向外部this 而不是指向调用者由此避免了一些作用域的问题

像这样：

import React from 'react';

export default class Hello extends React.Component
{
   
    constructor()
    {
   
        super();
        this.state={
   }
    }

    render(