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 }) }; 复制代码