React基础篇(六)React中绑定事件的注意点

本小节讲述在 React 中为 button 设置点击事件的注意点

1 前言

在 React 中,事件的名称都是 React 中提供的,因此名称的首字母必须厉害 例如

onClick      onMouseOver 

然后为事件提供的处理函数如下

onClick ={function}

2 为button 设置点击事件

2.1 无参数的点击事件
import React from 'react';

export default class EventItem extends  React.Component {

  render() {
    return (
        <div>
          <h2>React中设置按钮的点击事件</h2>
          
          <button onClick={this.show}> 按钮一 </button>
        </div>
    );
  }

  show(){
    console.log("button的 点击事件")
  }
}

或者是

import React from 'react';

export default class EventItem extends React.Component {

  render() {
    return (
        <div>
          <h2>React中设置按钮的点击事件</h2>
          <button onClick={()=>this.show()}> 按钮一</button>
          
        </div>
    );
  }

  show = () => {
    console.log('button的 点击事件');
  };


}

2.2 有参数的点击事件
import React from 'react';

export default class EventItem extends React.Component {

  render() {
    return (
        <div>
          <h2>React中设置按钮的点击事件</h2>
          <button onClick={() => this.show2('这里是传递的参数')}> 按钮二</button>
        </div>
    );
  }

 
  show2 = (pro) => {
    console.log('button 的点击事件 这里是传递的参数' + pro.toString());
  };
}

2.3 点击按钮修改私有属性值

在 React 中,如要修改 state 中的数据,推荐使用 this.setState({})
如下:

import React from 'react';

export default class EventItem extends React.Component {

  constructor() {
    super();
    this.state = {
      message: '这里是初始化的数据'
    };
  }

  render() {
    return (
        <div>
          <h2>React中设置按钮的点击事件</h2>
          <button onClick={() => this.updateMessage('这里是新的数据')}>点击修改数据</button>
        </div>
    );
  }
  updateMessage = (pro) => {
    this.setState({
      message: pro
    });
  };
}

需要注意的是:

  • 如果 state 中有多个属性的话,调用 setState 刷新数据时,只会把对应的 state 中属性值状态更新,而不会覆盖其它的
  • setState 方法执行是异步执行的

如果是想在 setState 执行结束后,我们再获取修改的属性的值或者其他的一些同步的后续操作,可以为 setState 设置一个回调函数

    this.setState({
      message: pro
    }, function() {
      console.log('这里是回调')
    });
2.4 React 中绑定文本框与 state 中的值
import React from 'react';

export default class EventItem extends React.Component {

  constructor() {
    super();
    this.state = {
      message: '这里是初始化的数据',
      name: '初始化的name'
    };
  }

  render() {
    return (
        <div>
          <h2>React中设置按钮的点击事件</h2>
          <p>
            输入姓名 <input type="text" style={{width: '20%'}} value={this.state.name} onChange={(e) => this.textChange(e)}/>
          </p>

        </div>
    );
  }

  textChange = (e) => {
    //  获取当前实时输入的文本框的值
    console.log(e.target.value);
    //  第二种方式
    // console.log(this.refs.txt.value);
    this.setState({
      name:e.target.value
    })

  };
早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页