react怎么修改值

react修改值的方法:1、打开相应的前端代码文件,获取标签上的参数;2、在方法调用的地方加一个bind指向;3、用bind改变this方向 ;4、使用state状态来修改值即可。

react怎么修改值

本教程操作环境:Windows10系统、react18版、Dell G3电脑。

react怎么修改值?

react 组件点击修改值 state

点击时改变标签上的值,但是在方法里是取不到this,那么首先要做的就是改变this 

class Leo extends React.Component{            render(){                return (
                                                        
                            //span获取标签上的参数                            {this.props.a}                            

sadfsdf

                        
)            }            show(){                console.log(this)//在方法里如果直接调用this;打印出来会为Null,所以我们要做的就是改变this,需要在方法调用的地方加一个bind指向            }        }        ReactDOM.render(,app)

登录后复制

用bind改变this方向 

 class Leo extends React.Component{            render(){                return (
                                                        
                            //span获取标签上的参数                            {this.props.a}                            

sadfsdf

                        
)            }            show(){                console.log(this)//在方法里如果直接调用this;打印出来会为Null,所以我们要做的就是改变this,需要在方法调用的地方加一个bind指向            }        }        ReactDOM.render(,app)

登录后复制

48698aaa2cf35101ab72a113d6e5f4b.jpg

需求:修改this.props.a里的值

        class Leo extends React.Component{            render(){                return (

//span获取标签上的参数 {this.props.a}

sadfsdf ) } show(){ this.props.a = 12 //如果直接这样修改发面会报错,read only(只能读不能修改);如果要修改就应该用state状态 } } ReactDOM.render(,app)

登录后复制

200089b1f2cc0deb630e017f08b3016.jpg

使用state 状态来修改值,需要用constructor去初始

tip:props 不能改变值,但state是可以改变的用setState

         class Leo extends React.Component{            constructor(){                super();                this.state = {                    msg:'hello react '                }             }            render(){                return (

//hello react {this.state.msg}

sadfsdf ) } show(){ this.setState({//点击修改span里的值 msg:'哈哈' }) } } ReactDOM.render(,app)

登录后复制

 

推荐学习:《react视频教程》

以上就是react怎么修改值的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2923662.html

(0)
上一篇 2025年3月11日 18:49:36
下一篇 2025年3月2日 07:21:14

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • react 怎么实现数组求和

    react实现数组求和的方法:1、创建一个代码示例文件;2、输入“import React,{useState,useEffect} from ‘react’;”;3、使用受控组件,并绑定onChange事件;4、通…

    2025年3月11日
    200
  • react 怎么删除dom元素

    react删除dom元素的方法:1、利用render生命周期来定义一个DOM节点变量;2、通过“onClickS(){this.setState({deled:false})}”实现删除dom元素即可。 本教程操作环境:Windows10系…

    2025年3月11日
    200
  • react native 删除线怎么设置

    react native设置删除线的方法:1、创建一个react示例文件;2、通过“”语句实现添加删除线即可。 本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。 react native 删除线怎么设置…

    2025年3月11日
    200
  • react 卡住动不了怎么办

    react卡住动不了的解决办法:1、查看3000端口是否被占用,若是被占用则杀掉进程;2、直接改下“package.json”文件的start配置为“”scripts”: {“start”: …

    2025年3月11日
    200
  • react怎么实现浮动菜单

    react实现浮动菜单的方法:1、利用onMouseOver和onMouseLeave来监听鼠标的变化;2、在样式中设置父类及子类的position值;3、设置父类值为relative,子类值为absolute,并在菜单的css中加入“z-…

    2025年3月11日
    200
  • react中怎么设置focus

    react中设置focus的方法:1、在componentDidMount中使用DOM元素;2、调用“this.input.focus()”的 DOM API即可使整体达到页面加载完成就自动focus到输入框的功能。 本教程操作环境:Win…

    2025年3月11日
    200
  • npm react 安装报错怎么办

    npm react安装报错的解决办法:1、打开项目中的“package.json”文件,找到dependencies对象;2、将其中的“react.json”移动到“devDependencies”;3、在终端中运行“npm audit &…

    2025年3月11日
    200
  • creat react app 报错怎么办

    creat react app报错的解决办法:1、通过“npm config set registry https://registry.npm.taobao.org”切换淘宝镜像源;2、通过执行“E:workspacedemop4>…

    2025年3月11日
    200
  • react key 报错怎么办

    react key报错的解决办法:1、在报错的页面搜索“map”或者“forEach”方法,然后添加唯一的key标识符;2、给footer里面自定义的按钮添加“key”属性即可。 本教程操作环境:Windows10系统、react18.0.…

    2025年3月11日
    200
  • react怎么取消冒泡

    react取消冒泡的方法:1、给dom元素绑定一个单击事件,重新渲染组件;2、通过“function  change(e){e.nativeEvent.stopImmediatePropagation();}”方式取消冒泡即可。 本教程操作…

    2025年3月11日
    200

发表回复

登录后才能评论