动态修改JS对象的值及React setState
一、在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的更多相关文章
- ASP.NET MVC程序中动态修改form的Action值
在练习ASP.NET MVC时,为了实现一个小功能,POST数据至服务器执行时,需要动态修改form的action值. 下面Insus.NET列举一个例子来演示它.让它简单,明白易了解. 你可以在控制 ...
- js 对象的值传递
一.变量赋值的不同 1.原始值 在将一个保存着原始值的变量复制给另一个变量时,会将原始值的副本赋值给新变量,此后这两个变量是完全独立的. 2.引用值: 在将一个保存着对象内存地址的变量复制给另一个变量 ...
- 如何在Firebug中修改js变量的值
在做项目的时候,经常需要调试js,要是项目环境在本地,可以直接在js代码里面设置断点或者修改变量值.但是在测试或者生产等线上环境时,再频繁登录服务器去修改js代码就显得麻烦了.项目线上环境,可以在fi ...
- 微信小程序 setData动态修改数据数组的值
1.问题说明 有一组数据,用来存储图片路径,动态修改图片的路径来上传图片,而小程序JS只能通过事件获取时机和setData方法修改数据来改变view. 而用这样写的方式明显是错误的 2.解决办法 字符 ...
- maven 根据P参数值打包动态修改properties文件中值或一定properties
需求:由于最近开发clover项目 ,没有使用spring,更没有使用任何框架,而使用J2EE的web工程,所以连接ZK和MongoDB.Redis等服务器需用指定properties文件, 而目前公 ...
- VUE 直接通过JS 修改html对象的值导致没有更新到数据中去
业务场景 我们在使用vue 编写 代码时,我们有一个 多行文本框控件,希望在页面点击一个按钮 在 文本框焦点位置插入一个 {pk}的数据. 发现插入 这个数据后,这个数据并没有同步到 数据中,但是直接 ...
- 关于Javascript中通过实例对象修改原型对象属性值的问题
Javascript中的数据值有两大类:基本类型的数据值和引用类型的数据值. 基本类型的数据值有5种:null.undefined.number.boolean和string. 引用类型的数据值往大的 ...
- 在vue中如何动态修改title标签的值
建议用vue-wechat-title插件为微信动态设置标题 1,首先安装插件 cnpm install vue-wechat-title --save 2,在main.js中引入 Vue.use(r ...
- js对象属性值初始化封装函数
在平常做项目的过程中,总是会遇到需要对一个已经定义过的对象的属性值进行初始化,且对象的属性值的类型有多种(string.number.array.object.boolean),为了方便自己就简单封装 ...
随机推荐
- 013-mac重做系统后的软件安装
一.系统设置 1.屏幕设置:系统偏好设置→显示器→排列,多个显示器可以排列组合 2.touch bar功能键设置:系统偏好设置→键盘→键盘,触控栏设置 F1 3.程序坞[dock]设置:系统偏好设置→ ...
- 2019.4.14 python基础30
前面学习的变量,数据类型(整型,浮点数,布尔),序列(字符串,列表,元祖,字典,集合) ,可以看做是数据的组织方式.数据可以看做是“砖块”! 流程控制语句是代码的组织方式,可以看做是“混凝土” 一个完 ...
- 利用data属性来存json、和取数据还原json
data属性用JSON.stringify转化为字符串存进去,,,取出来自动会变成json数组的
- git merge后如何撤销
merge后发现冲突太多,或者合并的分支代码并不是最新,那就直接撤销再合并好了. git reset --hard HEAD 用来撤销还没commit 的merge,其实原理就是放弃index和工作区 ...
- C++ MFC万能的类向导
MFC的类向导 只要你掌握了类向导,你基本就已经掌握了MFC了,毕竟布局和代码都是自动生成,再加上C++基础上手还是挺快的,剩下的就是多多练习了. 转自: https://blog.csdn.net/ ...
- 正则表达式-----re库
1.正则表达式的概念 a.为什么要用正则? 用字符串匹配也是可以的: startswith() 方法用于检查字符串是否是以指定子字符串开头,如果是则返回 True,否则返回 False.如果参数 be ...
- js超链接锚点定位
<html> <head> <meta charset="UTF-8"> </head> <body> <a on ...
- Vue.js新城之勇者探秘录
那么我们就继续来聊聊学习Vue的一些方法?以下的学习思路可以供大家作为参考: 1.视频教程带你入门:初学者如果没有MVVM模式的基础学习Vue,可能初期切换思路有比较大的难度,这个时候可以借助视频教程 ...
- 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 ...
- 发现一个新的注入 代码 eval
下面这句代码,就是一段恶意的代码,通过form POST 提交数据即可生成脚本文件. eval('?>' . file_get_contents('php://input'));