世界上最伟大的投资就是投资自己的教育
注意
this.setState((
obj = {},
obj["" + name] = event.target.value,
obj
))
有些同学对这里有疑问,其实 setState
里面的括号内是有三行语句,所以用了括号包起来,setState 还是接收一个对象的,obj 就是个对象。
经朋友测试也可以这么写:
const {name, value} = e.target;
this.setState({[name]: value})
src/components/RecordForm.js
import React, { Component } from 'react';
export default class RecordForm extends Component {
constructor(props) {
super(props);
this.state = {
date: "",
title: "",
amount: ""
}
}
handleChange(event) {
let name, obj;
name = event.target.name;
this.setState((
obj = {},
obj["" + name] = event.target.value,
obj
))
}
valid() {
return this.state.date && this.state.title && this.state.amount
}
render() {
return (
<form className="form-inline">
<div className="form-group">
<input type="text" className="form-control" onChange={this.handleChange.bind(this)} placeholder="Date" name="date" value={this.state.date} />
</div>
<div className="form-group">
<input type="text" className="form-control" onChange={this.handleChange.bind(this)} placeholder="Title" name="title" value={this.state.title} />
</div>
<div className="form-group">
<input type="text" className="form-control" onChange={this.handleChange.bind(this)} placeholder="Amount" name="amount" value={this.state.amount} />
</div>
<button type="submit" className="btn btn-primary" disabled={!this.valid()}>Create Record</button>
</form>
);
}
}
04:121FreeReact 基础实践篇免费视频教程 - 小型财务系统 #1 简介
12:262FreeReact 基础实践篇免费视频教程 - 小型财务系统 #2 实现 records 列表页
15:323FreeReact 基础实践篇免费视频教程 - 小型财务系统 #3 前端模拟 API 数据的两种方式
16:114FreeReact 基础实践篇免费视频教程 - 小型财务系统 #4 使用 jQuery 或 axios 请求 API 数据
12:305FreeReact 基础实践篇免费视频教程 - 小型财务系统 #5 静态类型检查和改造 API url
15:12FreeReact 基础实践篇免费视频教程 - 小型财务系统 #6 创建表单
17:327FreeReact 基础实践篇免费视频教程 - 小型财务系统 #7 发送 API 请求创建 Record
20:418FreeReact 基础实践篇免费视频教程 - 小型财务系统 #8 更新 Record
06:129FreeReact 基础实践篇免费视频教程 - 小型财务系统 #9 删除 Record
09:2910FreeReact 基础实践篇免费视频教程 - 小型财务系统 #10 统计金额(完结)
▬▬▬▬▬▬ 联系我 👋 ▬▬▬▬▬▬
微信:qiuzhi99pro
b 站:https://space.bilibili.com/31152817
知乎:https://www.zhihu.com/people/rails365
Github:https://github.com/hfpp2012
Youtube:https://www.youtube.com/channel/UCA-Jkgr40A9kl5vsIqg-BIg
© 汕尾市求知科技有限公司 | 创业者社区 | Rails365 Gitlab | Qiuzhi99 Gitlab | Railstart 创业项目 | 知乎 | b 站 | 搜索
粤公网安备 44152102000088号
| 粤ICP备19038915号
想要请问如果要填入的是一个 array 应该怎么处理呢?是不是只要在 state 先 declare 一个 empty array,然后 submit 的时候用 push 把它加进去?
思路像这样
example:
this.setState: {
myArray: []
};
请问 form 这里的
如何理解 this.setState 后面跟的两个小括号?一般不都是小括号 + 大括号吗?
另外里面的三行如何理解?
初始化一个 obj,然后 onChange 时触发,例如 title = ‘hello’
那第三行如何理解? obj = obj ?
其实很简单,就相当于
this.setState({ [e.target.name]: e.target.value });
这个写法,这个写法会好点 ,第一个括号是函数本身的,第二个就相当于数学的括号,包一下这样,变成一个变量 ,最后返回一个 obj ,前面是对 obj 进行操作,比如加一些 key value 之类的。感谢回复,还不理解的一点是最后一行
obj
, 按正常的 obj 操作不是第二行 obj 已经被赋值了吗不是已经算是
{ [e.target.name]: e.target.value }
?而且测试了一下最后一行写成
obj = obj
会报错,好像也不是这么理解返回一个 obj 这个如何理解?有没有合适的小例子方便理解下?
好像有点理解了,后面的()必须最后是一个 obj 类型 ,()里面相当于是三步运算,最后是一个 obj
不明白逗号操作符的可以看下 MDN 文档(https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Comma_Operator)
多谢,明白了!
|| 后面是默认请求的服务器吗 网站有教 ECMAscript 6 的教程吗
话说我发现老师你在写组件的时候 class 名字都有用一样的 貌似没啥影响 电脑是堆里添加俩个同名的 class 的吗 我发现老师的 file 名字不一样