iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > 其他 >react怎么修改属性值
  • 620
分享到

react怎么修改属性值

React 2023-05-14 21:05:16 620人浏览 独家记忆
摘要

本教程操作环境:windows10系统、React18.0.0版、Dell G3电脑。react怎么修改属性值?React修改数组对象中的某一个属性值一般我们会把Controller(控制器)里面的数据经过处理给到View(视图)层做显现,

react怎么修改属性值

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

react怎么修改属性值?

React修改数组对象中的某一个属性值

一般我们会把Controller(控制器)里面的数据经过处理给到View(视图)层做显现,这种简单的赋值方式如下

this.setSate({ 
 toList: response.data 
})

Vue的实现如下

this.todoList = response.data;

比如这是后台传递给我们的数据,

我们想要更改数组对象的其中一项`name`属性值该如何实现呢?

 state = {//类似于Vue里面的data()
    todoList: [
      {
        img: "xxx",
        name: "小飞",
      },
      {
        img: "xxx",
        name: "小候",
      },
    ]
  };

我们先来看一下在vue中如何实现

this.todoList[0].name = "Jony";
//或者
this.$set(this.todoList[0],"name","Jony");

哇~其实比较简单,那么在React中如何实现呢?

想象中是这样的...

 this.setState({
      todoList[0].name:"Jony"
    })
    //这样报错了,立马想到另一种方式
   let obj = {
      img:"xxx",
      name:"Jony"
    }
    this.setState({
      todoList[0]:obj
    })

都是不行的,我们的编辑器和浏览器都在报错,告诉我们不能这么写

79a46696cea772a85e013d724fc49ba.jpg

那么怎么来实现呢

//三目运算符 `key == 0` 是我写死的
//如果是点击传入的话可以是`key == index(下标)`
 const todoList = [...this.state.todoList];   //浅拷贝一下
  this.setState({
      todoList: todoList.map((item,key)=>key == 0?{...item,name: "Jony"}:item)
    });

这是官网针对 setState的描述

1478c1b02cffec520b363a2c50b0537.jpg

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

--结束END--

本文标题: react怎么修改属性值

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

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

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

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

下载Word文档
猜你喜欢
  • react怎么修改属性值
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react怎么修改属性值?React修改数组对象中的某一个属性值一般我们会把Controller(控制器)里面的数据经过处理给到View(视图)层做显现,...
    99+
    2023-05-14
    React
  • react如何修改属性值
    这篇文章主要讲解了“react如何修改属性值”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“react如何修改属性值”吧!react修改属性值的方法:1、打开相应的代码文件;2、创建好数组对象...
    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、打开相应的react代...
    99+
    2023-07-04
  • jquery怎么修改tr属性值
    本教程操作环境:windows7系统、jquery3.6版本、Dell G3电脑。tr元素<tr> 标签定义 HTML 表格中的行。一个 <tr> 元素包含一个或多个 <th> 或 <td> ...
    99+
    2023-05-14
    javascript jquery
  • react怎么修改值
    本教程操作环境:Windows10系统、react18版、Dell G3电脑。react怎么修改值?react 组件点击修改值 state点击时改变标签上的值,但是在方法里是取不到this,那么首先要做的就是改变this class Leo...
    99+
    2023-05-14
    React
  • javascript修改input属性值
    JavaScript是一种用于网页交互和动态效果的编程语言。它可以帮助开发人员为网页添加交互性和动态效果,实现与用户的互动和实时更新。在使用JavaScript时,我们需要操作网页DOM元素才能实现这些效果。本篇文章将介绍如何使用JavaS...
    99+
    2023-05-16
  • jquery如何修改tr属性值
    这篇文章主要介绍了jquery如何修改tr属性值的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇jquery如何修改tr属性值文章都会有所收获,下面我们一起来看看吧。jquery修改tr属性值的方法:1、利用jq...
    99+
    2023-07-05
  • 如何在python中修改属性值
    今天就跟大家聊聊有关如何在python中修改属性值,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。python主要应用领域有哪些1、云计算,典型应用OpenStack。2、WEB前端开...
    99+
    2023-06-14
  • jquery如何修改div的属性值
    这篇文章主要介绍了jquery如何修改div的属性值的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇jquery如何修改div的属性值文章都会有所收获,下面我们一起来看看吧。 ...
    99+
    2024-04-02
  • react如何修改值
    今天小编给大家分享一下react如何修改值的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。react修改值的方法:1、打开相应...
    99+
    2023-07-04
  • jquery如何修改disabled属性的值
    本篇内容主要讲解“jquery如何修改disabled属性的值”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“jquery如何修改disabled属性的值”吧! ...
    99+
    2024-04-02
  • 怎么使用JavaScript修改input元素的属性值
    这篇文章主要介绍“怎么使用JavaScript修改input元素的属性值”,在日常操作中,相信很多人在怎么使用JavaScript修改input元素的属性值问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么使...
    99+
    2023-07-06
  • jquery怎么修改style属性
    jquery怎么修改style属性,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。jquery中可利用attr()方法来修改st...
    99+
    2024-04-02
  • jquery怎么修改display属性
    jquery怎么修改display属性,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。在jquery中,可以利用css()方法来...
    99+
    2024-04-02
  • CSS margin-left属性的值怎么改
    要改变CSS margin-left属性的值,可以通过以下几种方式:1. 直接在CSS样式中修改:```css.example {m...
    99+
    2023-10-10
    CSS
  • jquery怎么改变img的属性值
    这篇文章主要介绍“jquery怎么改变img的属性值”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“jquery怎么改变img的属性值”文章能帮助大家解决问题。 ...
    99+
    2024-04-02
  • jquery如何修改元素css属性值
    这篇文章主要为大家展示了“jquery如何修改元素css属性值”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jquery如何修改元素css属性值”这篇文章吧。 ...
    99+
    2024-04-02
  • jquery如何修改指定属性的值
    这篇文章主要讲解了“jquery如何修改指定属性的值”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“jquery如何修改指定属性的值”吧! ...
    99+
    2024-04-02
  • gbasesql中怎么修改列属性
    要修改列属性,可以使用ALTER TABLE语句来实现。下面是一个示例: ALTER TABLE table_name MODIFY...
    99+
    2024-04-09
    gbasesql
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作