分享更有价值
被信任是一种快乐

react如何改变组件状态

文章页正文上

这篇文章主要介绍“react如何改变组件状态”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“react如何改变组件状态”文章能帮助大家解决问题。在react中,可以利用setState()来修改组件的状态。setState()是用于更新组件状态state的方法,该方法可以对组件state的更改排入队列,也可获取最新的状态,语法为“this.setState( { 要修改的部分数据 } )”。定义:是用来描述事物在某一时刻的形态数据 , 一般称为state。(可以简单理解为状态就是数据)
例如:9月23号时书的库存数量; 18岁时人的身高. vue中也有相关的概念特点:能被改变,改变了之后视图会有对应的变化 (双向数据绑定)有状态组件:能定义state的组件。类组件就是有状态组件。无状态组件:不能定义state的组件。函数组件又叫做无状态组件注意:2019年02月06日,React 16.8版本中引入了 React Hooks,从而函数式组件也能定义自己的状态了。【相关推荐:Redis视频教程、编程教学】本文主要讲解类组件的状态1)定义状态使用 state = { } 来做初始化

importReactfrom"react";

exportdefaultclassHelloextendsReact.Component{

//这里的state就是状态
state={
list:[{id:1,name:"给我一个div"}],
isLoading:true
};
}

2)在视图中使用

render(){
return(

姓名-{this.state.name}

    {this.state.list.map((item)=>(

  • {item.name}
  • ))}

{this.state.isLoading?"正在加载":"加载完成"}

>
);
}
元素>注意:React 事件名采用驼峰命名法,比如:onMouseEnter、onFocus、 onClick ……

importReactfrom'react'
importReactDOMfrom'react-dom'

consttitle=

react中的事件

exportdefaultclassHelloextendsReact.Component{ fn(){ console.log('mouseEnter事件') } render(){ return(
console.log('click事件')} onMouseEnter={this.fn}
) } } constcontent=(
{title} {}
) ReactDOM.render(content,document.getElementById('root'))

注意事项:事件名是小驼峰命名格式在类中补充方法this . fn不要加括号:onClick={ this.fn( ) } 此时会先调用fn(),然后将fn的执行结果当做click事件的处理函数别忘记了写this

classAppextendsReact.Component{
//组件状态
state={
msg:'helloreact'
}

//事件处理函数
handleClick(){
console.log(this)//这里的this是undefined
}

render(){
console.log(this)//这里的this是当前的组件实例App

return(
) } }

结果是这样:render方法中的this指向的是当前react组件。事件处理程序中的this指向的是undefinedclass类和模块的内部,默认就是严格模式,所以不需要使用use strict指定运行模式。只要你的代码写在类或模块之中,就只有严格模式可用,所以类中的函数this指向了undefined在事件处理程序外套一层箭头函数缺点:需要在处理函数外额外包裹一个箭头函数, 结构不美观优点:前面讲过在 {this.handleClick ( )}这里面调用处理函数的时候不要加小括号,不然里面的程序会立即执行掉,现在在外面包裹一层箭头函数之后,不仅可以加上小括号,还能实现传参,后面会用到

classAppextendsReact.Component{
state={
msg:'helloreact'
}

handleClick(){
console.log(this.state.msg)
}

render(){
return(
) } }

通过bind()方法改变函数this指向并不执行该函数的特性解决

classAppextendsReact.Component{
state={
msg:'helloreact'
}

handleClick(){
console.log(this.state.msg)
}

rende免费云主机、域名r(){
return(
) } }

在class中声明事件处理函数的时候直接使用箭头函数

classAppextendsReact.Component{
state={
msg:'helloreact'
}

handleClick=()=>{
console.log(this.state.msg)
}
render(){
return(
) } }

优点:代码简洁,直观,使用最多的一种方式注意:
不能通过直接修改state中的值来让视图变化 ! ! !
通过this.setState()方法修改在react中,setstate是用于更新组件状态state的方法;setState()将对组件state的更改排入队列,并通知React需要使用更新后的state重新渲染此组件及其子组件。语法:this.setState( { 要修改的部分数据 } )
这是继承自React.Component的修改类组件状态的方法

state={
count:0,
list:[1,2,3],
person:{
name:'jack',
age:18
}
}

//【不推荐】直接修改当前值的操作:
this.state.count++
++this.state.count
this.state.count+=1
this.state.count=1
this.state.list.push(4)
this.state.person.name='rose'

//【推荐】不是直接修改当前值,而是创建新值的操作:
this.setState({
count:this.state.count+1,
list:[...this.state.list,4],
person:{
...this.state.person,
	//要修改的属性,会覆盖原来的属性,这样,就可以达到修改对象中属性的目的了
name:'rose'
}
})

HTML中表单元素是可输入的,即表单维护着自己的可变状态(value)。但是在react中,可变状态通常是保存在state中的,并且要求状态只能通过setState进行修改。React中将state中的数据与表单元素的value值绑定到了一起,由state的值来控制表单元素的值受控组件:value值受到了react控制的表单元素示例代码:

classAppextendsReact.Component{
state={
msg:'helloreact'
}

handleChange=(e)=>{
this.setState({
msg:e.target.value
})
}

//value绑定state配合onChange事件双向绑定
render(){
return(
) } }

注意事项:使用受控组件的方式处理表单元素后,状态的值就是表单元素的值。即:想要操作表单元素的值,只需要通过this.setState( { 要修改的部分数据 } )操作对应的状态即可受控组件是通过 React 组件的状态来控制表单元素的值非受控组件是通过手动操作 DOM 的方式来控制ref:用来在 React 中获取 DOM 元素示例代码:

import{createRef}from'react'

classHelloextendsComponent{
txtRef=createRef()

handleClick=()=>{
//文本框对应的DOM元素
//console.log(this.txtRef.current)

//文本框的值:
console.log(this.txtRef.current.value)
}

render(){
return(
) } }

关于“react如何改变组件状态”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注云技术行业资讯频道,小编每天都会为大家更新不同的知识点。

相关推荐: vscode写vue没有高亮语法如何解决

今天小编给大家分享一下vscode写vue没有高亮语法如何解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。 解决方法:1、打开vscode,点…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册