1. Register for an event

• React registering events is very similar to the DOM's event syntax
• Syntax on+event name={event handler} e.g. onClick={this.handleClick}
• Note: React events use camel case, such as onMouseEnter, onClick

class App extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>I point</button>
      </div>
    )
  }

  handleClick() {
    console.log('click event fired')
  }
}

2. Event object

• The event object can be obtained through the parameters of the event handler

• Event objects in React are called: synthetic events (objects)

• Synthetic Events: Compatible with all browsers, no need to worry about cross-browser compatibility

function handleClick(e) {
    e.preventDefault()
    console.log('event object', e)
}
<a onClick={this.handleClick}>Click me, will not jump to the page</a>

3.this points to the problem

• this in the event handler points to undefined
• this in the render method points to the current react component. Only this in the event handler is problematic

Analyze the reasons:

• Inside the class, the local strict mode use strict is turned on, so this will not point to window undefined
• In onClick={this.fn}, the call of this.fn is not called through the instance of the class, so the value is undefined
• The render function is called by the component instance, so this in the render function points to the current component

class App extends React.Component {
  state = {
    msg: 'hello react'
  }
  handleClick() {
    console.log(this.state.msg)
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>I point</button>
      </div>
    )
  }
}

​​

 

4.this points to the problem solution

• Scenario 1: Arrow Functions
• Option 2: bind modifies this to point to
• Scenario 3: Class Instance Methods

method one:

class App extends React.Component {
  state = {
    msg: 'hello react'
  }
  render() {
    return (
      <div>
        <button onClick={() => { console.log(this.state.msg) }>I point</button>
      </div>
    )
  }
}

Method two:

class App extends React.Component {
  state = {
    msg: 'hello react'
  }
  handleClick() {
    console.log(this.state.msg)
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick.bind(this)}>I point</button>
      </div>
    )
  }
}

Method 3: [recommended]

class App extends React.Component {
  state = {
    msg: 'hello react'
  }

  handleClick = () => {
    console.log(this.state.msg)
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>I point</button>
      </div>
    )
  }
}

Note: this syntax is experimental, but has babel escapes so there is no problem

The third way is the most developed and used.　　

5.setState modifies the state

• The state in the component is mutable

• Syntax this.setState({data to be modified})

• Note: Do not modify the value in state directly, it must be modified through the this.setState() method

• The role of setState

  • modify state

  • Update UI

• Idea: Data-Driven Views

class App extends React.Component {
  state = {
    count: 1
  }
  handleClick=()=>{
    this.setState({
      count: this.state.count + 1
    })
  }
  render() {
    return (
      <div>
        <p>frequency: {this.state.count}</p>
        <button onClick={this.handleClick}>I point+1</button>
      </div>
    )
  }
}

6. Controlled component usage

• Add a state to the state as the value of the form element (control the value of the form element)

• Add a change event to the form element, set the value of state to the value of the form element (control the change of the value)

Common controlled components:

• Text box, text field, drop-down box (operation value attribute)

• Checkbox (manipulate checked property)

class App extends React.Component {
  state = {
    msg: 'hello react'
  }

  handleChange = (e) => {
    this.setState({
      msg: e.target.value
    })
  }

  render() {
    return (
      <div>
        <input type="text" value={this.state.msg} onChange={this.handleChange}/>
      </div>
    )
  }
}

7. Uncontrolled components - ref (deprecated)

Uncontrolled components use the native DOM method to get the value of the form element with the help of ref

• Create a ref by calling the React.createRef() method

constructor() {
  super()
  this.txtRef = React.createRef()
}
txtRef = React.createRef()

• Add the created ref object to the text box

<input type="text" ref={this.txtRef}/>

• Get the value of the text box through the ref object

handleClick = () => {
  console.log(this.txtRef.current.value)
}

Uncontrolled components are not used much, it is recommended to use controlled components