一、在JS里使用(非ES6)

实现场景: 给一个空对象填充某一指定数组内的值 并随机生成数量

const fruit = ['apple', 'banana', 'orange']
let fruitInfo = {} fruitInfo = fruit.map(item => {
return {
[item]: Math.floor(Math.random() * 10)
}
})
console.log(fruitInfo)

输出:

[{apple: 2},
{banana: 1},
{orange: 9}]

这里的重点在于返回的时候 通过[]可以成功调用变量的值.

二、React setState的应用

和上面例子同理.利用[]调用变量

class Example extends PureComponent{
...
handleChange = (val, type) => {
this.setState({
[type]: val
},() => {
console.log(`当前${type}的数量: ${this.state[type]}`)
})
}
... render(){
...
return (
<Fagement>
<span>Banana: </span>
<select onChange={(e) => this.handleChange(e.target.value, 'banana')}>
<option value ="1">1</option>
<option value ="2">2</option>
</select><br /> <span>Orange: </span>
<select onChange={(e) => this.handleChange(e.target.value, 'orange')}>
<option value ="1">1</option>
<option value ="2">2</option>
</select>
</Fagement>
)
}
}

我们分别选择第二项的时候看看输出的结果

输出: .

当前banana的数量: 2
当前orange的数量: 2

动态修改JS对象的值及React setState的更多相关文章

  1. ASP.NET MVC程序中动态修改form的Action值

    在练习ASP.NET MVC时,为了实现一个小功能,POST数据至服务器执行时,需要动态修改form的action值. 下面Insus.NET列举一个例子来演示它.让它简单,明白易了解. 你可以在控制 ...

  2. js 对象的值传递

    一.变量赋值的不同 1.原始值 在将一个保存着原始值的变量复制给另一个变量时,会将原始值的副本赋值给新变量,此后这两个变量是完全独立的. 2.引用值: 在将一个保存着对象内存地址的变量复制给另一个变量 ...

  3. 如何在Firebug中修改js变量的值

    在做项目的时候,经常需要调试js,要是项目环境在本地,可以直接在js代码里面设置断点或者修改变量值.但是在测试或者生产等线上环境时,再频繁登录服务器去修改js代码就显得麻烦了.项目线上环境,可以在fi ...

  4. 微信小程序 setData动态修改数据数组的值

    1.问题说明 有一组数据,用来存储图片路径,动态修改图片的路径来上传图片,而小程序JS只能通过事件获取时机和setData方法修改数据来改变view. 而用这样写的方式明显是错误的 2.解决办法 字符 ...

  5. maven 根据P参数值打包动态修改properties文件中值或一定properties

    需求:由于最近开发clover项目 ,没有使用spring,更没有使用任何框架,而使用J2EE的web工程,所以连接ZK和MongoDB.Redis等服务器需用指定properties文件, 而目前公 ...

  6. VUE 直接通过JS 修改html对象的值导致没有更新到数据中去

    业务场景 我们在使用vue 编写 代码时,我们有一个 多行文本框控件,希望在页面点击一个按钮 在 文本框焦点位置插入一个 {pk}的数据. 发现插入 这个数据后,这个数据并没有同步到 数据中,但是直接 ...

  7. 关于Javascript中通过实例对象修改原型对象属性值的问题

    Javascript中的数据值有两大类:基本类型的数据值和引用类型的数据值. 基本类型的数据值有5种:null.undefined.number.boolean和string. 引用类型的数据值往大的 ...

  8. 在vue中如何动态修改title标签的值

    建议用vue-wechat-title插件为微信动态设置标题 1,首先安装插件 cnpm install vue-wechat-title --save 2,在main.js中引入 Vue.use(r ...

  9. js对象属性值初始化封装函数

    在平常做项目的过程中,总是会遇到需要对一个已经定义过的对象的属性值进行初始化,且对象的属性值的类型有多种(string.number.array.object.boolean),为了方便自己就简单封装 ...

随机推荐

  1. 013-mac重做系统后的软件安装

    一.系统设置 1.屏幕设置:系统偏好设置→显示器→排列,多个显示器可以排列组合 2.touch bar功能键设置:系统偏好设置→键盘→键盘,触控栏设置 F1 3.程序坞[dock]设置:系统偏好设置→ ...

  2. 2019.4.14 python基础30

    前面学习的变量,数据类型(整型,浮点数,布尔),序列(字符串,列表,元祖,字典,集合) ,可以看做是数据的组织方式.数据可以看做是“砖块”! 流程控制语句是代码的组织方式,可以看做是“混凝土” 一个完 ...

  3. 利用data属性来存json、和取数据还原json

    data属性用JSON.stringify转化为字符串存进去,,,取出来自动会变成json数组的

  4. git merge后如何撤销

    merge后发现冲突太多,或者合并的分支代码并不是最新,那就直接撤销再合并好了. git reset --hard HEAD 用来撤销还没commit 的merge,其实原理就是放弃index和工作区 ...

  5. C++ MFC万能的类向导

    MFC的类向导 只要你掌握了类向导,你基本就已经掌握了MFC了,毕竟布局和代码都是自动生成,再加上C++基础上手还是挺快的,剩下的就是多多练习了. 转自: https://blog.csdn.net/ ...

  6. 正则表达式-----re库

    1.正则表达式的概念 a.为什么要用正则? 用字符串匹配也是可以的: startswith() 方法用于检查字符串是否是以指定子字符串开头,如果是则返回 True,否则返回 False.如果参数 be ...

  7. js超链接锚点定位

    <html> <head> <meta charset="UTF-8"> </head> <body> <a on ...

  8. Vue.js新城之勇者探秘录

    那么我们就继续来聊聊学习Vue的一些方法?以下的学习思路可以供大家作为参考: 1.视频教程带你入门:初学者如果没有MVVM模式的基础学习Vue,可能初期切换思路有比较大的难度,这个时候可以借助视频教程 ...

  9. The type com.google.protobuf.GeneratedMessageV3$Builder cannot be resolved. It is indirectly referenced from required .classfiles

    在做项目的时候,导入了几个类,导入了相关的jar. 结果在package处报了The type com.google.protobuf.GeneratedMessageV3$Builder canno ...

  10. 发现一个新的注入 代码 eval

    下面这句代码,就是一段恶意的代码,通过form POST 提交数据即可生成脚本文件. eval('?>' . file_get_contents('php://input'));