广告
返回顶部
首页 > 资讯 > 前端开发 > 其他 >react怎么修改值
  • 764
分享到

react怎么修改值

React 2023-05-14 21:05:30 764人浏览 薄情痞子
摘要

本教程操作环境:windows10系统、React18版、Dell G3电脑。react怎么修改值?react 组件点击修改值 state点击时改变标签上的值,但是在方法里是取不到this,那么首先要做的就是改变this class Leo

react怎么修改值

教程操作环境:windows10系统、React18版、Dell G3电脑。

react怎么修改值?

react 组件点击修改值 state

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

class Leo extends React.Component{
            render(){
                return (<div>
                            <input type="button" value="点击" onClick={this.show}/>
                            <br/>
                            //span获取标签上的参数
                            <span>{this.props.a}</span>
                            <h1>sadfsdf</h1>
                        </div>)
            }
            show(){
                console.log(this)//在方法里如果直接调用this;打印出来会为Null,所以我们要做的就是改变this,需要在方法调用的地方加一个bind指向
            }
        }
        ReactDOM.render(<Leo a='12'/>,app)

用bind改变this方向

 class Leo extends React.Component{
            render(){
                return (<div>
                            <input type="button" value="点击" onClick={this.show.bind(this)}/>
                            <br/>
                            //span获取标签上的参数
                            <span>{this.props.a}</span>
                            <h1>sadfsdf</h1>
                        </div>)
            }
            show(){
                console.log(this)//在方法里如果直接调用this;打印出来会为Null,所以我们要做的就是改变this,需要在方法调用的地方加一个bind指向
            }
        }
        ReactDOM.render(<Leo a='12'/>,app)

48698aaa2cf35101ab72a113d6e5f4b.jpg

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

<script type="text/babel">
        class Leo extends React.Component{
            render(){
                return (<div>
                            <input type="button" value="点击" onClick={this.show.bind(this)}/>
                            <br/>
                            //span获取标签上的参数
                            <span>{this.props.a}</span>
                            <h1>sadfsdf</h1>
                        </div>)
            }
            show(){
               this.props.a = 12 //如果直接这样修改发面会报错,read only(只能读不能修改);如果要修改就应该用state状态
            }
        }
        ReactDOM.render(<Leo a='12'/>,app)
    </script>

200089b1f2cc0deb630e017f08b3016.jpg

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

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

 <script type="text/babel">
        class Leo extends React.Component{
            constructor(){
                super();
                this.state = {
                    msg:'hello react '
                }
 
            }
            render(){
                return (<div>
                            <input type="button" value="点击" onClick={this.show.bind(this)}/>
                            <br/>
                            //hello react
                            <span>{this.state.msg}</span>
                            <h1>sadfsdf</h1>
                        </div>)
            }
            show(){
                this.setState({//点击修改span里的值
                    msg:'哈哈'
                })
            }
        }
        ReactDOM.render(<Leo/>,app)
    </script>

以上就是react怎么修改值的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: react怎么修改值

本文链接: https://www.lsjlt.com/news/206056.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • react怎么修改值
    本教程操作环境:Windows10系统、react18版、Dell G3电脑。react怎么修改值?react 组件点击修改值 state点击时改变标签上的值,但是在方法里是取不到this,那么首先要做的就是改变this class Leo...
    99+
    2023-05-14
    React
  • react怎么修改属性值
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react怎么修改属性值?React修改数组对象中的某一个属性值一般我们会把Controller(控制器)里面的数据经过处理给到View(视图)层做显现,...
    99+
    2023-05-14
    React
  • react如何修改值
    今天小编给大家分享一下react如何修改值的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。react修改值的方法:1、打开相应...
    99+
    2023-07-04
  • react怎么修改对象的属性值
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react怎么修改对象的属性值?react 修改state为对象中的某一个属性值 使用对象的assign方法Object.assign方法用于对象的合并,...
    99+
    2023-05-14
    React
  • react如何修改属性值
    这篇文章主要讲解了“react如何修改属性值”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“react如何修改属性值”吧!react修改属性值的方法:1、打开相应的代码文件;2、创建好数组对象...
    99+
    2023-07-04
  • react怎么修改state
    今天小编给大家分享一下react怎么修改state的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。react改变state的方...
    99+
    2023-07-04
  • react 怎么修改端口
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react 怎么修改端口?React修改默认端口号问题我们在使用React的时候经常会遇到这种情况,3000端口号被占用。有时候可以关掉3000端口,但更...
    99+
    2023-05-14
    React
  • react refs怎么修改dom
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react refs怎么修改dom?React使用refs操作DOM方法详解在react框架 甚至说是三大框架中都是不太支持大家直接去操作dom的因为也没...
    99+
    2023-05-14
    dom React
  • react如何修改对象的属性值
    这篇文章主要讲解了“react如何修改对象的属性值”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“react如何修改对象的属性值”吧!react修改对象属性值的方法:1、打开相应的react代...
    99+
    2023-07-04
  • react 怎么动态修改style
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react 怎么动态修改style?关于React动态修改元素样式的三种方式React动态修改元素样式React动态修改元素样式常用的方式有两种:借助re...
    99+
    2023-05-14
    style React
  • mysql怎么修改null值
    mysql修改null值的示例:假设一个user表中second字段存在null值,我们可以通过以下语句将null值修改成0:SELECT IFNULL(second,'1') as s...
    99+
    2022-10-15
  • react native怎么修改端口号
    本教程操作环境:Windows10系统、react-native0.68.0版、Dell G3电脑。react native怎么修改端口号?react native 端口号被占用,修改启动端口号前言本文基于 “react-native”: ...
    99+
    2023-05-14
    端口号 React Native
  • jquery怎么修改button的值
    使用jquery修改button值的方法:1.新建html项目,引入jquery;2.创建button按钮,设置文本值和id属性;3.为按钮绑定onclick点击事件;4.通过id获取按钮对象,使用text()方法修改值;具体步骤如下:首先...
    99+
    2022-10-11
  • jquery怎么修改字段值
    使用jquery修改字段值的方法:1.新建html项目,引入jquery;2.创建测试标签,设置文本和id属性;3.添加button按钮,绑定onclick点击事件;4.通过id获取标签对象,使用html()方法修改字段值;具体步骤如下:首...
    99+
    2022-10-06
  • react怎么修改state中的数组
    要修改state中的数组,可以使用setState方法更新state的值。在React中,不应直接修改state中的值,而是应该创建...
    99+
    2023-09-13
    react
  • react中usestate改变值不渲染怎么解决
    这篇文章主要介绍“react中usestate改变值不渲染怎么解决”,在日常操作中,相信很多人在react中usestate改变值不渲染怎么解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,...
    99+
    2022-10-19
  • python怎么修改元组的值
    在Python中,元组是不可变的数据类型,即一旦创建了元组,就无法修改元组中的元素值。但是,你可以通过以下方法来修改元组的值:1. ...
    99+
    2023-10-11
    python
  • vue怎么修改父组件值
    本教程操作环境:Windows10系统、Vue 3版、Dell G3电脑。vue怎么修改父组件值?vue中子组件更改父组件数据 因为vue是单项数据流,所以没办法直接在子组件中去修改父组件里面的数据,vue提倡单项数据流,为了...
    99+
    2023-05-14
    Vue
  • jquery怎么修改tr属性值
    本教程操作环境:windows7系统、jquery3.6版本、Dell G3电脑。tr元素<tr> 标签定义 HTML 表格中的行。一个 <tr> 元素包含一个或多个 <th> 或 <td> ...
    99+
    2023-05-14
    javascript jquery
  • java怎么修改注解的值
    要修改注解的值,可以使用反射来获取注解的信息,并通过反射修改注解的属性值。 首先,需要获取被注解的类或方法的对象,然后通过Class...
    99+
    2023-10-24
    java
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作