React 基础实践篇免费视频教程 - 小型财务系统 #6 创建表单

注意

    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>
    );
  }
}