React JSX syntax – Do you really know JSX?

1 Event, state, and setState

In the App. In js:

import React, { Component } from 'react'

//1. Click the popbox effect (basic event format)
export default class App5 extends Component {
handleClick(){
alert(132456)}render() {
    return (
        <div>
            <button onClick={this.handleClick}>button</button>
        </div>)}}Copy the code

2. Realize the function of accumulation (use of state 1)

export default class App4 extends Component {
   constructor(props){
      super(props)
         this.state = {
         num: 0
      }
   // the function of the button to write the premise
   this.handleClick = this.handleClick.bind(this);
}
Copy the code

In the handleClick

handleClick(){
    this.setState({
    num: this.state.num+1})}Copy the code

In the render

render() {
    return (
        <div>
            <h2>{ this.state.num }</h2>{/* Bind this to */} {/*<button onClick={this.handleClick.bind(this)}>Button 1</button>*/} {/* Arrow functions don't have this by default, so this points to an array object */} {/*<button onClick={()= >This.handleclick ()}> button 2 '</button>` * /}<button onClick={this.handleClick}>Button 3</button>
        </div>)}Copy the code

3. Implement bidirectional data binding (use of state 2)

export default class App5 extends Component {
constructor(p){
super(p)
this.state = {
name: "Hello world."}}handleChange(e){
console.log(e.currentTarget.value)
console.log(e.target.value)
this.setState({
name: e.target.value
})
}
render() {
return (
`<div>`
`<h2>`{ this.state.name }`</h2>`
<input type="text" value={this.state.name} onChange={this.handleChange.bind(this)} / >`</div>`)}}Copy the code

4. Short for state

App6. In js:

import React, { Component } from 'react'

export default class App6 extends Component {
    // State written in Construtor can also be simplified
    state = {
        username: "Zhang"
    }
    
    render() {
        return (
            `<div>`
                `<h1>`{this.state.username}`</h1>`
                `<button onClick={this.handleClick.bind(this)}>`button`</button>`
            `</div>`)}handleClick(){
        this.setState({
            username: "Bill"}}})Copy the code

5. SetState is asynchronous

We can verify that setState is asynchronous or synchronous with the following code:

import React, { Component } from 'react'

export default class App5 extends Component {
    state = {
        msg: Hello world.
    }
    
    render() {
        return (
            `<div>`
                `<h2>`{this.state.msg}`</h2>`
                `<button onClick={this.handleClick.bind(this)}>`Change the MSG`</button>`
            `</div>`)}handleClick() {
        // is this.setState asynchronous or synchronous?
        this.setState({
            msg: "hello world"  / / modify MSG
        })
        console.log(this.state.msg) // Synchronous output "Hello world", asynchronous output "hello world"

        // Verify the result: this.setState is asynchronous}}Copy the code

Finally, setState has callback functions:

    this.setState({
        msg: "hello world"
    }, () = >{
        console.log(this.state.msg);    // hello world
    })
Copy the code

If you want to call the data after modifying it, you can use the callback function.

Well, this time to share so much, because I am also learning, there are mistakes hope we point out, progress together ya