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 }) }; 複製代碼