一、在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. 使用纳米 Protocol buffers 作为序列化数据

    使用纳米 Protocol buffers 作为序列化数据 Protocol Buffers 是 Google 公司开发的一种数据描述语言,类似于XML能够将结构化数据序列化. 但是它更小, 更快, ...

  2. 牛客随笔(c++)

    1.关于指针的字节大小: 当为32位系统时大小为4字节,64位系统时大小为8字节: #include<iostream> using namespace std; int main() { ...

  3. ORA-00600: 内部错误代码, 参数: [kcm_headroom_warn_1], [], [], [], [], [], [], [], [], [], [], []

    SQL*Plus: Release 11.2.0.4.0 Production on 星期三 1月 1 08:53:48 2003 Copyright (c) 1982, 2013, Oracle. ...

  4. CDIE2019中国数字化创新展暨首席信息官峰会上海站来袭~

    China Digital Innovation Expo & CIO Summit 2019是由Dot Connector(上海华昂商务咨询有限公司)主办的第五届聚焦中国技术领袖,探索创新, ...

  5. 2019-oo-第一次总结

    一.度量分析程序结构 1.UML类图分析 1.1第一次作业         1.2第二次作业 1.3第三次作业   1.4总结 从UML类图三次作业的可以看出,我从一个类到逐渐利用多个类,代码结构在不 ...

  6. mysql导入本地文件(作业)

    1.准备本地文件(pet.txt) 2.在CMD中启动mysql服务,然后输入以下命令导入(pet.txt) load data local infile '路劲' into table pet; 3 ...

  7. C# 初识Redis

    一.下载:听网上的朋友説的找的是redis for windows ,直接下载即可 https://github.com/ServiceStack/redis-windows 二.下载后解压 文件 r ...

  8. JAVA多线程实现的四种方式(转自https://www.cnblogs.com/felixzh/p/6036074.html)

    Java多线程实现方式主要有四种:继承Thread类.实现Runnable接口.实现Callable接口通过FutureTask包装器来创建Thread线程.使用ExecutorService.Cal ...

  9. centos7 源码安装php7

    因为php安装需要编译,所以服务器应该保证gcc和g++环境的安装 1. 首先释放安装包: tar -xvzf php-7.0.5.tar.gz cd php-7.0.5 2. 接下来进行参数配置,配 ...

  10. Dev TreeList 某一列进行格式化显示

    private void treeList1_GetNodeDisplayValue(object sender, GetNodeDisplayValueEventArgs e)        {   ...