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

想被带飞的鱼 2022-05-14 13:44:48 阅读数:566

propsreact使用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