• 首页
  • React状态，props和state的对比和各自的使用

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

《 Teach you how to use koa2 + vite + TS + vue3 + Pinia to build front-end SSR enterprise projects