react.js click

function Button() {
  return <button onClick={() => alert('Button clicked!')}>Click Me</button>;
}

class Button extends React.Component {
  handleClick = () => {
    alert('Button clicked!');
  }

  render() {
    return <button onClick={this.handleClick}>Click Me</button>;
  }
}

<button onClick={this.handleClick}>Click Me</button>

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log(this); // 正确指向组件实例
  }

  render() {
    return <button onClick={this.handleClick}>Click Me</button>;
  }
}

import { debounce } from 'lodash';

class SearchBox extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = debounce(this.handleChange.bind(this), 300);
  }

  handleChange(e) {
    console.log(e.target.value);
  }

  render() {
    return <input type="text" onChange={this.handleChange} />;
  }
}