React event processing

Event naming uses the small hump name handleGetdata, whereas with JSX syntax you need to pass in a function as an event handler instead of a string

<button onClick={activateLasers}>
  Activate Lasers
</button>
Copy the code

Prevent the default event preventDefault(e.preventDefault()) instead of return false

In ES6 Class components, event handlers are typically added to the component as a method

class Clock extends React.Component {
  constructor(props){
    super(props);
    this.state = {date:new Date(a)};// In order to use this in the callback function, we need to bind this in the constructor
    this.handleGetdata = this.handleGetdata.bind(this);
  }
  / / a mount
  componentDidMount() {
    this.timeId = setInterval(
      () = >this.getTime(),1000)}/ / unloading
  componentWillUnmount() {
    clearInterval(this.timeId)
  }
  / / write one
  handleGetdata(){
    // Update data with this.setstate
    // this.setState(state => ({
    // isToggleOn: ! state.isToggleOn
    // }));
  }
  / / write two
  // public class fields syntax
  handleGetdata = () = >{}getTime() {
    this.setState({
      date: new Date()}); }/ / writing three
  render() {
    // This syntax ensures that 'this' in' handleClick 'is bound.
    return (
          <button onClick={(If you need arguments, you can pass in e)= >This.handlegetdata (argument)}> Click me</button>
    );
  }
  // render(){
  // return(
  // 
      

  {/ / < h2 > the current time. This state. The date. ToLocaleTimeString ()} < / h2 >
  // 
  / /)
  // }
}
Copy the code

Pass parameters to the event handler

<button onClick={(e) = > this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)} >Delete Row</button>
Copy the code