剧场模式
首页前端react 基础实践篇-小型财务系统

react 基础实践篇-小型财务系统 #6 创建表单

下载源码hfpp2012发布于React2101 次点击播放时长:15:12
7

注意

    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>
    );
  }
}
8 条回复
  • weikee94
    weikee94 #1

    想要请问如果要填入的是一个array 应该怎么处理呢?是不是只要在state 先declare 一个empty array,然后submit的时候用push 把它加进去?

    思路像这样
    example:
    this.setState: {
    myArray: []
    };

  • twoheart
    twoheart #2

    请问 form 这里的

      handleChange(event) {
        let name, obj;
        name = event.target.name;
        this.setState((
          obj = {},
          obj["" + name] = event.target.value,
          obj
        ))
      }
    

    如何理解 this.setState 后面跟的两个小括号?一般不都是小括号+大括号吗?

  • twoheart
    twoheart #3

    另外里面的三行如何理解?
    初始化一个obj,然后onChange时触发,例如 title = ‘hello’
    那第三行如何理解? obj = obj ?

  • hfpp2012
    hfpp2012 #4
    twoheart twoheart #10 回复

    其实很简单,就相当于 this.setState({ [e.target.name]: e.target.value }); 这个写法,这个写法会好点 ,第一个括号是函数本身的,第二个就相当于数学的括号,包一下这样,变成一个变量 ,最后返回一个 obj ,前面是对 obj 进行操作,比如加一些 key value 之类的。

  • twoheart
    twoheart #5
    hfpp2012 hfpp2012 #10 回复

    感谢回复,还不理解的一点是最后一行 obj , 按正常的 obj 操作不是第二行 obj 已经被赋值了吗
    不是已经算是 { [e.target.name]: e.target.value }
    而且测试了一下最后一行写成 obj = obj 会报错,好像也不是这么理解
    返回一个 obj 这个如何理解?有没有合适的小例子方便理解下?

  • twoheart
    twoheart #6

    好像有点理解了,后面的 () 必须最后是一个 obj 类型 , ()里面相当于是三步运算,最后是一个 obj

  • hammer
    hammer #7
    twoheart twoheart #10 回复
  • twoheart
    twoheart #8

    多谢,明白了!

购买或订阅扫码加我微信
微信二维码

加我微信:15014006126

支付宝付款
友情提示
   官方 QQ 1 群 697272886(500/2000)
   官方 QQ 2 群 856141852
相似的视频
react 基础实践篇-小型财务系统 #8 更新 Record

react 基础实践篇-小型财务系统 #8 更新 Record

免费播放时长:20:41

4780 次点击

react 基础实践篇-小型财务系统 #10 统计金额(完结)

react 基础实践篇-小型财务系统 #10 统计金额(完结)

免费播放时长:09:29

2905 次点击

react 基础实践篇-小型财务系统 #2 实现 records 列表页

react 基础实践篇-小型财务系统 #2 实现 records 列表页

免费播放时长:12:26

4501 次点击

react 基础实践篇-小型财务系统 #1 简介

react 基础实践篇-小型财务系统 #1 简介

免费播放时长:04:12

19616 次点击

© Rails365 | 隐私条款 | 服务条款 | 粤ICP备15004902号 | 在线学员:32

Top