React 事件處理簡單演示-有解無憂

html版本：

<button onclick="activateLasers()">
  激活按鈕
</button>

react版本

<button onClick={activateLasers}>
  激活按鈕
</button>

不能使用回傳 false 的方式阻止默認行為，必須明確的使用 preventDefault

html版本

<a href="https://www.cnblogs.com/chenyingying0/p/#" onclick="console.log('點擊鏈接'); return false">
  點我
</a>

react版本

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('鏈接被點擊');
  }
 
  return (
    <a href="https://www.cnblogs.com/chenyingying0/p/#" onClick={handleClick}>
      點我
    </a>
  );
}

通常不需要使用 addEventListener 為一個已創建的 DOM 元素添加監聽器
需要在這個元素初始渲染的時候提供一個監聽器

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import PropTypes from 'prop-types';

class Toggle extends React.Component{
  constructor(props){
    super(props);

    this.state={
      toggle:true
    }

    this.toggleHandler=this.toggleHandler.bind(this);
  }

  //prevState是React的前一個State(狀態) 
  toggleHandler(){
    this.setState(prevState=>({
      toggle:!prevState.toggle
    }))
  }
  
  render(){
    return(
      <button onClick={this.toggleHandler}>{this.state.toggle?'on':'off'}</button>
    )
  }
}

  ReactDOM.render(
    <div>
      <Toggle/>
    </div>,
    document.getElementById('example')
  );

serviceWorker.unregister();

向事件處理程式傳遞引數

React 點擊事件的 bind(this) 如何傳參?
需要通過 bind 方法來系結引數，第一個引數指向 this,第二個引數開始才是事件函式接收到的引數

通過 bind 方式向監聽函式傳參，事件物件 e 要排在所傳遞引數的后面

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import PropTypes from 'prop-types';

class Toggle extends React.Component{
  constructor(props){
    super(props);

    this.state={
      name:'cyy'
    }
  }

  //prevState是React的前一個State(狀態) 
  preventPop(name,e){
    e.preventDefault();
    console.log(name);
  }
  
  render(){
    return(
      <button onClick={this.preventPop.bind(this,this.state.name)}>阻止默認行為并列印名字</button>
    )
  }
}

  ReactDOM.render(
    <div>
      <Toggle/>
    </div>,
    document.getElementById('example')
  );

serviceWorker.unregister();

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/124772.html

標籤：JavaScript

上一篇：React Props簡單演示

下一篇：三步帶你開發一個短鏈接生成平臺