react中怎么改变state的值


本文摘自PHP中文网,作者藏色散人,侵删。

react中改变state值的方法:首先打开相应的react代码文件;然后使用React提供的“this.setState({键名:值})”方法来进行修改state的值即可。

本教程操作环境:windows7系统、react17.0.1版,该方法适用于所有品牌电脑。

相关推荐:《react教程》

react中改变state的值

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

import React from 'react'

  

export default  class ClickS extends React.Component {

  constructor () {

    super()

    this.state= {

      msg: '123'

    }

  }

  render () {

    return <div>

      <button onClick={()=>this.show()}>按钮</button>

      <h2>{this.state.msg}</h2>

    </div>

  }

  show () {

    console.log(this)

    this.setState({

      msg: '222'

    })

  }

}

3f1c89b7a51d330dd9b68b36df459fe.png

也可以这么写

1

2

3

4

5

6

7

8

9

10

<button onClick={this.show.bind(this)}>按钮</button>

show () {

  console.log(this)

  this.setState({

    msg: '222'

  }, () => {

    console.log(this.state.msg) // 更新后的值222

  })

  console.log(this.state.msg) // 123

}

92c966a09ddf9b992f14c69719c69bb.png

注意:

在React中想为state中的数据重新赋值,不要使用this.state.xxx = 值。应该使用React提供的this.setState({键名:值})来进行修改。

如果this.state有多个值,而只对其中一个进行修改,并不会影响其他的值。应setState只会把对应state状态值更新,而不会覆盖其他的state状态值。

ca18097f63a2c55cf85aebf0567125d.png

同时,this.setState方法的执行是异步的。所以想要获取最新的状态值。需要通过回调函数。

以上就是react中怎么改变state的值的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

jquery和React的区别是什么?

如何解决React中文乱码问题

什么是React dva?

vue 和 React 的优点有哪些

React可以做什么?

React需要node吗

什么编辑器支持React

bootstrap和React的区别是什么?

React native有什么作用

React-dom是什么

更多相关阅读请进入《React》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...