编程知识 cdmana.com

React status, comparison and respective use of props and state

React state

All components produce state object

props: You can only get the value inside , Do not modify , It doesn't work if it's modified

state: Get and change values

One : Component status update

1. Use ref Access to the node , And get the content of the node
  • establish ref object

    this.xxx = React.createRef();
    
  • obtain ref node

    this.xxx.current
    

example :

 class Addcount extends React.Component{
    
        // Constructors 
        constructor(){
    
            super();
            this.input = React.createRef();
        }
      // Get the value in the text box 
        hanleInput = ()=>{
              
              console.log(this.input.current.value);
        }
        render(){
    
            return <div>
                <div>
                    {
    /* When giving a text box an initial value value after ,( Empty component ), Click the text box to enter the value. You can't enter */}
                    <input type="text" ref={
    this.input} value={
    this.state.value} onInput={
    this.handleValue}/>
                    <input type="button" value=" Gain gain gain "  onClick={
    this.hanleInput}/>
                </div>
                </div>
        }
    }

    ReactDOM.render(<Addcount />,document.getElementById("root"))
2. Use state object
  • initialization state

     constructor(){
          
         super();  // The general construction method is to call the constructor of the parent class first , Otherwise this Out-of-service ,super It means to call the constructor of the parent class 
         this.state = {
          
         count:0,
         value:"",
         gender:"female"
         }
     }
    
  • obtain state

    <p>{
          this.state.count}</p>
    
  • Set up state

    this.setState({
          
          count:this.state.count + 1          
     })
    

Two :props and state contrast

The same thing : Both are objects provided inside the component

props:

  1. Used to transfer data between components
  2. Pass through content between custom attributes or labels
  3. One way delivery
  4. You can set it manually , But if you set it manually, the component status will not be updated , But if the value is changed through the parent component , The component status will be updated

state:

  1. Each component can be initialized state object
  2. state Itself cannot pass , Delivery can only be used props, But values can be passed
  3. Can set value , The component status of the object is updated
  4. The setting method must be setState, Instead of using it directly this.state

3、 ... and : Event handling

  1. stay HTML The component handles the corresponding event by binding the event handling method

    The bound attribute name must be preceded by on, And use the hump nomenclature

  2. Not HTMl Component cannot handle events , But it can go through props Pass on

    Can be a string , function , object

In the event this

ES6 In the class , Of event handling methods this by undefined

resolvent

  1. Bind the current object to the in the method in the constructor this

    this.hanleCount= this.handleCount.bind(this)
    
  2. It seems that the arrow function is used to define the method

    handleCount=(e)=>{
          ...}
    
  3. Use... When binding events bind Method

    onClick={
          this.handleCount.bind(this)}
    
  4. Use the arrow function when binding events

    onClick={
          e=>this.handleCount(e)}
    

Four : Controlled and uncontrolled components

  1. The text box is set to value attribute

  2. Single or multiple choices set checked attribute

  3. How to make controlled components changeable

    • Use state Set the value

    • binding onChange event

    • Get the value of the component in the event handling method and change state

      <input type="text" value={
              this.state.value}
      	onChange={
              (e)=>{
              this.setState({
              value:e.target.value})}}
      >
      

5、 ... and :state

1. Must be initialized between uses ( In the constructor )

2. binding event

3. obtain this.state

4. modify , Must be in setState The changes in it this.setState({count:this.state.count+1})

setState It's an asynchronous method , Because this operation is more than just changing the value , There's going to be DOM operation

Operation steps

ref So I gave him a sign , Then you can get it through this logo , But you can't modify it , It is not recommended to use

1.state To increase the value

onClick

1. binding

 render(){
    
     return <div>
         <lable> Counter :{
    this.state.count}</lable>
         <input type="button" value=" increase "  onClick={
    this.hanleCount}/>
          </div>  
     </div>
 }

2. initialization ( In the constructor )

 constructor(){
    
     super();  // The general construction method is to call the constructor of the parent class first , Otherwise this Out-of-service ,super It means to call the constructor of the parent class 
     this.state = {
    
         count:0
     }
 }

3. Function modification

 // function ( To use the arrow function , Otherwise this Can't get )
hanleCount = ()=>{
    
    this.setState({
    
        count:this.state.count + 1
    });
    console.log(this.state.count);
}
2.state To get the value of the text box

onInput()

1. Bind the text box and click event

 <div>
 {/* When giving a text box an initial value value after ,( Empty component ), Click the text box to enter the value. You can't enter */}
     <input type="text" ref={this.input} value={this.state.value} onInput={this.handleValue}/>
     <input type="button" value=" Gain gain gain "  onClick={this.hanleInput}/>
 </div>

2. Initialize the value of the text box

 constructor(){
     super();  // The general construction method is to call the constructor of the parent class first , Otherwise this Out-of-service ,super It means to call the constructor of the parent class 
     this.input = React.createRef();
     this.state = {
     count:0,
     value:""
     }
 }

3. Change the value of the text box or get the value of the text box

// Get the value in the text box 
hanleInput = ()=>{  
    // The value obtained is still state The value of the inside 
	console.log(this.state.value);
}
// Set the value of the text box 
handleValue = (e)=>{
    this.setState({
    value:e.target.value
})
}
3.state Get the value of the radio box

onChange

1. binding

  <lable> Gender :</lable>
  <input type="radio" value="male" name="gender" checked={
    this.state.gender=="male" ? true :false} onChange={
    this.hanleGender}/>
  <lable> male </lable>
  <input type="radio" value="female"  name="gender" checked={
    this.state.gender=="female" ? true :false} onChange={
    this.hanleGender}/>
  <lable> Woman </lable>

2. initialization

 this.state = {
    
                count:0,
                value:"",
                gender:"female"
            }

3. modify , assignment

  // Getting gender 
  hanleGender = (e)=>{
    
  this.setState({
    
  gender:e.target.value
  })
  // console.log("e23456",this.state.gender);
  }

4. Get value

 hanleInput = ()=>{
              
 	console.log(this.state.value,this.state.gender);
 }

end : Code example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Counter </title>
</head>
<body>
    <div id="root">
        <!-- <input type="password" placeholder=""> -->
    </div>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>    
    <script src="./js/babel.min.js"></script>
    <script type="text/babel">

    class Addcount extends React.Component{
    
        // Constructors 
        constructor(){
    
            super();  // The general construction method is to call the constructor of the parent class first , Otherwise this Out-of-service ,super It means to call the constructor of the parent class 
            this.input = React.createRef();
            this.state = {
    
                count:0,
                value:"",
                gender:"female"
            }
        }
        // function ( To use the arrow function , Otherwise this Can't get )
        hanleCount = ()=>{
    
            this.setState({
    
                count:this.state.count + 1
            });
            // console.log(this.state.count);
        }
        // Get the value in the text box 
        hanleInput = ()=>{
              
            console.log(this.state.value,this.state.gender);
            // console.log(this.input.current.value);
        }
        // Set the value of the text box 
        handleValue = (e)=>{
    
            this.setState({
    
                value:e.target.value,                
            })
            // console.log(e.target.value,this.state.gender);
        }

        // Getting gender 
        hanleGender = (e)=>{
    
            this.setState({
    
                gender:e.target.value
            })
            // console.log("e23456",this.state.gender);
        }
        render(){
    
            return <div>
                <div>
                    {
    /* When giving a text box an initial value value after ,( Empty component ), Click the text box to enter the value. You can't enter */}
                    <input type="text" ref={
    this.input} value={
    this.state.value} onInput={
    this.handleValue}/>
                    <input type="button" value=" Gain gain gain "  onClick={
    this.hanleInput}/>
                </div>
                <div>
                    <lable> Counter :{
    this.state.count}</lable>
                    <input type="button" value=" increase "  onClick={
    this.hanleCount}/>
                </div>       
                <div>
                    <lable> Gender :</lable>
                    <input type="radio" value="male" name="gender" checked={
    this.state.gender=="male" ? true :false} onChange={
    this.hanleGender}/>
                    <lable> male </lable>
                    <input type="radio" value="female"  name="gender" checked={
    this.state.gender=="female" ? true :false} onChange={
    this.hanleGender}/>
                    <lable> Woman </lable>
                    

                </div>           

                </div>
        }
    }

    ReactDOM.render(<Addcount />,document.getElementById("root"))

    </script>
</body>
</html>

版权声明
本文为[Fish that want to be taken away]所创,转载请带上原文链接,感谢
https://cdmana.com/2022/134/202205141344069049.html

Scroll to Top