React component basics 2

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

 

 

  

 

Tags: React

Posted by tam2000k2 on Mon, 07 Nov 2022 01:47:52 +1030