React Learn the basics of Grammar Two in five minutes

The following code executes in the React scaffolding environment

Description of composite events

import React from 'react'
import ReactDOM from 'react-dom'
// React event object is actually handled by react,
class App extends React.Component{
    state = {
        msg:"I am MSG"
    }
    handleClick = (e) = > {
        console.log(e)
        console.log(this.state.msg)
    }
    onClick = (e) = > {
        e.preventDefault()
        console.log(2222)}render() {
        return (
            <div>
                <h1>I'm an App component</h1>
                <button onClick={this.handleClick}>button</button>
                <a href="http://www.baidu.com" onClick = {this.goLink}>Go to baidu</a>
            </div>
        )
    }
}
ReactDOM.render(<App></App>.document.getElementById('root'))
Copy the code

The use of setState

import React from 'react'
import ReactDOM from 'react-dom'
/ / a setState role
//1. Change the value of state
class App extends React.Component{
    state = {
        msg:"I am MSG".money:100.count:10
    }
    handleClick = (e) = > {
        // this.state. MSG = "hey hey"
        this.setState({
          msg:"Lady gaga".money:1000
        })
    }
    onClick = (e) = > {
        e.preventDefault()
        // Prevent bubbling
        console.log(2222)
    }
    add = () = > {
        this.setState({
            count:this.state.count + 1})}render() {
        return (
            <div>
                <h1>- {this.state. MSG} - {this.state. Count}</h1>
                <button onClick={this.handleClick}>button</button>
                <button onClick={this.add}>Change the value</button>
                <a href="http://www.baidu.com" onClick = {this.goLink}>Go to baidu</a>
            </div>
        )
    }
}
ReactDOM.render(<App></App>.document.getElementById('root'))
Copy the code

Description of controlled components

// Need: have a form element and want the value of the form element to be bound to the data in state
// This is what the v-model looks like.
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component{
    state = {
        msg:'gaga'
    }
    handleChange =(e) = > {
    // console.log(e.target.value)
    const value = e.target.value
    this.setState({
        msg:value
    })
    }
    render() {
        return (
            <div>
                <h1>The controlled components</h1>{/* readOnly readOnly */}<input type="text" 
                value={this.state.msg} 
                onChange={this.handleChange}/>
            </div>
        )
    }
}
ReactDOM.render(<App></App>.document.getElementById('root'))
Copy the code

Description of multiple controlled components

import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component{
    state = {
        username:"Chang Lao SAN".desc:"Black".fruits:3.isSingle:false
    }
    handleUser = (e) = >{
     this.setState({
         username:e.target.value
     })
    };
    handeleDesc = (e) = > {
        this.setState({
            desc:e.target.value
        })
    };
    handleFruits = (e) = > {
        this.setState({
            fruits:e.target.value
        })
    }
    handleSingle = (e) = > {
        // console.log(e.target.value)
        this.setState({
            isSingle:e.target.checked
            
        })
    }
    render() {
        return (
            <div>
                <h1>The controlled components</h1>{/* Input box */}<div>
                    <input type="text" value={this.state.username} 
                    onChange={this.handleUser}/>
                </div>{/* Text field */}<div>
                    <textarea value={this.state.desc}
                    onChange={this.handeleDesc} name="" id="" cols="30" rows="10"></textarea>
                </div>{/* Dropdown menu */}<div>
                    <select name="" id="" value = {this.state.fruits}
                    onChange={this.handleFruits}>
                        <option value="1">apple</option>
                        <option value="2">watermelon</option>
                        <option value="3">durian</option>
                        <option value="4">Mango.</option>
                    </select>
                </div>{/* Check box */}<div>Whether the single<input type="checkbox" checked={this.state.isSingle} onChange={this.handleSingle}/>
                </div>
            </div>
        )
    }
}
ReactDOM.render(<App></App>.document.getElementById('root'))
Copy the code

Optimization of handling of multiple controlled components

import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component{
    state = {
        username:"Chang Lao SAN".desc:"Black".fruits:3.isSingle:false
    }
    handleChange = (e) = > {
    // console.log(" triggered ")
    const key = e.target.name
    const value = e.target.value
    const type = e.target.type
    if(type === "checkbox" ) {
        this.setState({
            [key]:e.target.checked,
        })
    } else {
        this.setState({
            [key]:value
        })
    }

    }
    render() {
        return (
            <div>
                <h1>The controlled components</h1>{/* Input box */}<div>
                    <input name="username" type="text" value={this.state.username} 
                    onChange={this.handleChange}/>
                </div>{/* Text field */}<div>
                    <textarea name="desc" value={this.state.desc}
                    onChange={this.handleChange}  id="" cols="30" rows="10"></textarea>
                </div>{/* Dropdown menu */}<div>
                    <select name="fruits" id="" value = {this.state.fruits}
                    onChange={this.handleChange}>
                        <option value="1">apple</option>
                        <option value="2">watermelon</option>
                        <option value="3">durian</option>
                        <option value="4">Mango.</option>
                    </select>
                </div>{/* Check box */}<div>Whether the single<input name="isSingle" type="checkbox" checked={this.state.isSingle} onChange={this.handleChange}/>
                </div>
            </div>
        )
    }
}
ReactDOM.render(<App></App>.document.getElementById('root'))
Copy the code

Attribute name expression

/**const temp = "gaga" const obj = {[temp]:18 *10} console.log(obj)*/

const key = "desc"
const obj = {
    username:"Hey hey".age:18,
    [key]:"Ha ha"
}
console.log(obj.desc)
Copy the code

Consolidation of controlled components

import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component{
    state = {
        username:"Chang Lao SAN".desc:"Black".fruits:3.isSingle:false
    }
    handleChange = (e) = > {
    const {name,type,value,checked} = e.target
    this.setState({
        [name]: type === "checkbox"? checked:value
    })
    }
    render() {
        return (
            <div>
                <h1>The controlled components</h1>{/* Input box */}<div>
                    <input name="username" type="text" value={this.state.username} 
                    onChange={this.handleChange}/>
                </div>{/* Text field */}<div>
                    <textarea name="desc" value={this.state.desc}
                    onChange={this.handleChange}  id="" cols="30" rows="10"></textarea>
                </div>{/* Dropdown menu */}<div>
                    <select name="fruits" id="" value = {this.state.fruits}
                    onChange={this.handleChange}>
                        <option value="1">apple</option>
                        <option value="2">watermelon</option>
                        <option value="3">durian</option>
                        <option value="4">Mango.</option>
                    </select>
                </div>{/* Check box */}<div>Whether the single<input name="isSingle" type="checkbox" checked={this.state.isSingle} onChange={this.handleChange}/>
                </div>
            </div>
        )
    }
}
ReactDOM.render(<App></App>.document.getElementById('root'))
Copy the code

Demonstration of uncontrolled components

import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component{
    constructor() {
        super(a)this.inRef = React.createRef()
        this.h1Ref = React.createRef()
    }
    handleClick = () = > {
        console.log(this.inRef.current.value)
        console.log(this.h1Ref.current)
        // Get focus
        this.inRef.current.focus()
    }
    render() {
        return (
            <div>
                <h1 ref={this.h1Ref}>Demonstrates uncontrolled components</h1>
                <input type="text" ref={this.inRef} />
                <button onClick={this.handleClick}>Click on the</button>
            </div>
        )
    }
}
ReactDOM.render(<App></App>.document.getElementById('root'))
Copy the code

Ref is used to get the React component

import React from 'react'
import ReactDOM from 'react-dom'
class MyTable extends React.Component{
    render() {
       return <div>I'm a table</div>
    }
    validate() {
        console.log("Verify content")}sayHi() {
        console.log("Hello there.")}}class App extends React.Component{
    constructor() {
        super(a)this.inRef = React.createRef()
        this.h1Ref = React.createRef()
        this.tableRef = React.createRef()
    }
    handleClick = () = > {
        console.log(this.inRef.current.value)
        console.log(this.h1Ref.current)
        // Get focus
        this.inRef.current.focus()
        console.log(this.tableRef.current)
    }
    render() {
        return (
            <div>
                <h1 ref={this.h1Ref}>Demonstrates uncontrolled components</h1>
                <input type="text" ref={this.inRef} />
                <button onClick={this.handleClick}>Click on the</button>
                <MyTable ref={this.tableRef}></MyTable>
            </div>
        )
    }
}
ReactDOM.render(<App></App>.document.getElementById('root'))
Copy the code

Comment list – Comprehensive cases

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'

class App extends React.Component {
    state = {
        list:[
            {id:1.name:"Slag ash".content:"If you're a brother, cut me down."},
            {id:2.name:Louis Koo.content:"Come and play with the blue Moon."},
            {id:3.name:"Andy Lau".content:"Freezing rain"}].username:"".content:""
    }
    clear = () = > {
        this.setState({
            list:[]
        })
    }
    add =() = > {
        const {username,content} = this.state
        if(username === "" || content === "") return
        const obj = {
            id: +new Date(),
            name:username,
            content,
        }
        this.setState({
          list:[obj,...this.state.list],
          username:"".content:""
        })
    }
    del (id) {
    // console.log(id)
    /**this.state.list.filter(item => item.id ! == id)*/
    this.setState({
        list:this.state.list.filter(item= >item.id ! == id) }) } handleChange =(e) = > {
       const {name,value} = e.target
       this.setState({
           [name]:value
       })
    }
    renderList() {
    if(this.state.list.length >0) {
       return <ul>
       {this.state.list.map(item => {
           return <li key ={item.id}>
           <h3>{item.name}</h3>
           <p>{item.content}</p>
           <button onClick={this.del.bind(this,item.id)}>delete</button>
         </li> 
       })}
     </ul>
        } else {
            return  <div className="no-comment">No comments</div>}}render() {
    return (
      <div className="app">
        <div>
          <input value={this.state.username} 
          name ="username"
          onChange={this.handleChange} className="user" type="text" placeholder="Please enter reviewer" />
          <br />
          <textarea
          value={this.state.content}
          onChange={this.handleChange}
          name="content"
            className="content"
            cols="30"
            rows="10"
            placeholder="Please enter comments."
          />
          <br />
          <button onClick={this.add}>comment</button>
          <button onClick = {this.clear}>Empty the comments</button>
        </div>{/ *<div className="no-comment">No comments</div> */}
        {this.renderList()}
      </div>)}}// Render component
ReactDOM.render(<App />.document.getElementById('root'))

Copy the code

Props pass value – class component

import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component{
 render(){
     console.log(this.props)
     return (
        <div>
            <h1>Class components</h1>
            <p>{this.props.name}</p>
            <p>{this.props.age}</p>
        </div>)}}const arr = ['zhang fei'.'lyu3 bu4']
ReactDOM.render(<App name="Zhang" age={18} list={arr} ></App>.document.getElementById('root'))
Copy the code

Props pass value – Function component

import React from 'react'
import ReactDOM from 'react-dom'
function Demo({name,age,desc}) {
    return (
        <div>
           <h1>I'm a function component</h1>
           <p>{name}</p>
           <p>{age}</p>
           <p>{desc}</p>
        </div>
    )
}
ReactDOM.render(<Demo name="Whoever whoever" age={18} desc="Invincible"></Demo>.document.getElementById('root'))
Copy the code

The characteristics of the props

import React from 'react'
import ReactDOM from 'react-dom'
// Props
//1. Can pass any type of array, object, number, string, JSX, function...
//2. Props is read-only and cannot be modified
 
// The data source of the component
//1. State is its own, and can be modified by setState
//2. Props are external
class App extends React.Component{
    render() {
        console.log(this.props)
        return (
            <div>
                <h1>The characteristics of the props</h1>
                {this.props.element}
                <button onClick={this.changeProps}>Change the value of the props</button>
            </div>
        )
    }
    changeProps = () = > {
        console.log(this.props.num)
        console.log(this.props.arr)
    }
}
const arr = ["Zhang"."Bill"]
const obj = {
    name:"zs"
}
const num = 100
const str= "abc"
const element = <div>I'm a JSX structure, I'm an element</div>
const fn =() = > {
    console.log('gaga')
}
ReactDOM.render(<App arr={arr} obj ={obj} num={num} element={element} fn={fn} str={str}></App>.document.getElementById('root'))
Copy the code

The above code all sources of video materials in the knock code, only for learning reference