function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log(‘鏈接被點擊‘);
  }
 
  return (
    <a href="#" onClick={handleClick}>
      點我
    </a>
  );
}

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true
 
};
 
    // 這邊綁定是必要的，這樣 `this` 才能在回調函數中使用
    this.handleClick = this.handleClick.bind(this);
  }
 
  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }
 
  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? ‘ON‘ : ‘OFF‘}
      
 
</button>
    );
  }
}
 
ReactDOM.render(
  <Toggle />,
  document.getElementById(‘example‘)
);

class Popper extends React.Component{
    constructor(){
        super();
        this.state = {name:‘Hello world!‘};
    }
    
    preventPop(name, e){    //事件對象e要放在最後
        e.preventDefault();
        alert(name);
    }
    
    render(){
        
 
return (
            <div>
                <p>hello</p>
                {/* 通過 bind() 方法傳遞參數。 */}
                <a href="https://reactjs.org" onClick={this.preventPop.bind(this,this.state.name)}>Click</a>
            </div>
        );
    }
}

React事件處理