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
    })

  };