编程知识 cdmana.com

React状态,props和state的对比和各自的使用

React状态

所有组件都会产生state对象

props:只能获取里面的值,不能修改,就算修改了也没用

state:获取和改变值

一:组件状态更新

1.使用ref获取节点,并获取节点的内容
  • 创建ref对象

    this.xxx = React.createRef();
    
  • 获取ref节点

    this.xxx.current
    

实例:

 class Addcount extends React.Component{
    
        //构造函数
        constructor(){
    
            super();
            this.input = React.createRef();
        }
      //获取文本框里面的值
        hanleInput = ()=>{
              
              console.log(this.input.current.value);
        }
        render(){
    
            return <div>
                <div>
                    {
    /*当给文本框一个初始值value之后,(受空组件),点击文本框输入值不能输入了*/}
                    <input type="text" ref={
    this.input} value={
    this.state.value} onInput={
    this.handleValue}/>
                    <input type="button" value="增获取加"  onClick={
    this.hanleInput}/>
                </div>
                </div>
        }
    }

    ReactDOM.render(<Addcount />,document.getElementById("root"))
2.使用state对象
  • 初始化state

     constructor(){
          
         super();  //一般构造方法都是先调用父类的构造函数,不然this不能用,super的意思是调用父类的构造函数
         this.state = {
          
         count:0,
         value:"",
         gender:"female"
         }
     }
    
  • 获取state

    <p>{
          this.state.count}</p>
    
  • 设置state

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

二:props和state对比

相同点:二者都是组件内部提供的对象

props:

  1. 用于组件之间传递数据
  2. 通过自定义属性或标签之间的内容传递
  3. 单向传递
  4. 可以手动设置,但手动设置的话不会更新组件状态,但是通过父组件传值过来更改的话,就会更新组件状态

state:

  1. 每个组件都可以初始化state对象
  2. state本身不能传递,传递只能利用props,但是值可以传递
  3. 可以设值,对象的组件状态会更新
  4. 设值方法必须是setState,而不是直接使用this.state

三:事件处理

  1. 在HTML中组件通过绑定事件处理方法来处理相应事件

    绑定的属性名前一定要加on,并且使用驼峰命名法

  2. 非HTMl组件不能处理事件,但是可以通过props传递

    可以是字符串,函数,对象

事件中的this

ES6的类中,事件处理方法的this为undefined

解决方法

  1. 在构造函数中将当前对象绑定给方法中的this

    this.hanleCount= this.handleCount.bind(this)
    
  2. 似乎用箭头函数定义方法

    handleCount=(e)=>{
          ...}
    
  3. 在绑定事件时使用bind方法

    onClick={
          this.handleCount.bind(this)}
    
  4. 在绑定事件时使用箭头函数

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

四:受控和非受控组件

  1. 文本框设置了value属性

  2. 单选或多选设置了checked属性

  3. 如何让受控组件可更改

    • 使用state设置值

    • 绑定onChange事件

    • 在事件处理方法中获取组件的值并更改state

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

五:state

1.使用之间必须得初始化(在构造函数里面)

2.绑定事件

3.获取this.state

4.修改,必须在setState里面的修改this.setState({count:this.state.count+1})

setState是一个异步方法,因为这个操作不仅仅只是改值,还要进行DOM操作

操作步骤

ref相当于是给他一个标识,后面就通过这个标识来获取它,但是不能修改它,不推荐使用

1.state来增加数值

onClick

1.绑定

 render(){
    
     return <div>
         <lable>计数器:{
    this.state.count}</lable>
         <input type="button" value="增加"  onClick={
    this.hanleCount}/>
          </div>  
     </div>
 }

2.初始化(在构造函数中)

 constructor(){
    
     super();  //一般构造方法都是先调用父类的构造函数,不然this不能用,super的意思是调用父类的构造函数
     this.state = {
    
         count:0
     }
 }

3.函数修改

 //函数(要使用箭头函数,不然this无法获取)
hanleCount = ()=>{
    
    this.setState({
    
        count:this.state.count + 1
    });
    console.log(this.state.count);
}
2.state来获取文本框的值

onInput()

1.给文本框和点击事件绑定

 <div>
 {/*当给文本框一个初始值value之后,(受空组件),点击文本框输入值不能输入了*/}
     <input type="text" ref={this.input} value={this.state.value} onInput={this.handleValue}/>
     <input type="button" value="增获取加"  onClick={this.hanleInput}/>
 </div>

2.初始化文本框的值

 constructor(){
     super();  //一般构造方法都是先调用父类的构造函数,不然this不能用,super的意思是调用父类的构造函数
     this.input = React.createRef();
     this.state = {
     count:0,
     value:""
     }
 }

3.改变文本框的值或获取文本框的值

//获取文本框里面的值
hanleInput = ()=>{  
    //获取的值还是state里面的值
	console.log(this.state.value);
}
//设置文本框的值
handleValue = (e)=>{
    this.setState({
    value:e.target.value
})
}
3.state获取单选框的值

onChange

1.绑定

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

2.初始化

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

3.修改,赋值

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

4.获取值

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

终:代码示例

<!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>计数器</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{
    
        //构造函数
        constructor(){
    
            super();  //一般构造方法都是先调用父类的构造函数,不然this不能用,super的意思是调用父类的构造函数
            this.input = React.createRef();
            this.state = {
    
                count:0,
                value:"",
                gender:"female"
            }
        }
        //函数(要使用箭头函数,不然this无法获取)
        hanleCount = ()=>{
    
            this.setState({
    
                count:this.state.count + 1
            });
            // console.log(this.state.count);
        }
        //获取文本框里面的值
        hanleInput = ()=>{
              
            console.log(this.state.value,this.state.gender);
            // console.log(this.input.current.value);
        }
        //设置文本框的值
        handleValue = (e)=>{
    
            this.setState({
    
                value:e.target.value,                
            })
            // console.log(e.target.value,this.state.gender);
        }

        //获取性别
        hanleGender = (e)=>{
    
            this.setState({
    
                gender:e.target.value
            })
            // console.log("e23456",this.state.gender);
        }
        render(){
    
            return <div>
                <div>
                    {
    /*当给文本框一个初始值value之后,(受空组件),点击文本框输入值不能输入了*/}
                    <input type="text" ref={
    this.input} value={
    this.state.value} onInput={
    this.handleValue}/>
                    <input type="button" value="增获取加"  onClick={
    this.hanleInput}/>
                </div>
                <div>
                    <lable>计数器:{
    this.state.count}</lable>
                    <input type="button" value="增加"  onClick={
    this.hanleCount}/>
                </div>       
                <div>
                    <lable>性别:</lable>
                    <input type="radio" value="male" name="gender" checked={
    this.state.gender=="male" ? true :false} onChange={
    this.hanleGender}/>
                    <lable></lable>
                    <input type="radio" value="female"  name="gender" checked={
    this.state.gender=="female" ? true :false} onChange={
    this.hanleGender}/>
                    <lable></lable>
                    

                </div>           

                </div>
        }
    }

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

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

版权声明
本文为[想被带飞的鱼]所创,转载请带上原文链接,感谢
https://blog.csdn.net/m0_62008199/article/details/124750267

Scroll to Top