React快速开发迷你记账簿------day06 创建表单

day 06 创建表单

本节目标:实现这个表单

Records.js文件添加如下代码

  ...
  render(){
      const { error, isLoaded, records } = this.state;
      let recordsComponents;//添加组件
  
      if (error) {
        recordsComponents =  <div>Error:{error.message}</div>;
      }
      else if (!isLoaded) {
        recordsComponents  = <div>Loading...</div>;
      } else {
        recordsComponents = (
            <table className="table table-bordered">
              <thead>
                <tr>
                  <th>Date</th>
                  <th>Title</th>
                  <th>Amount</th>
                </tr>
  
              </thead>
              <tbody>
                {records.map((record) => <Record key={record.id} {...record} />)}
              </tbody>
            </table>
        );
      }
     
      
      //在这里重构return  
      return (
        <div>
              <h2>Records</h2>
         		//在这里添加表单组件...
          	<RecordForm />
              {recordsComponents}
        </div>
      )
  }
  ...

新建RecordForm.js组件

src/components/RecordForm.js

在这里创建一个新的表单 name属性为 date

  import React, { Component } from 'react';
  export default class RecordForm extends Component {
      render() {
          return (
            <form className = "form-inline">
                <div className = "form-group">
              	<input type="text" className="form-control" placeholder ="Date" name="date"/>
                </div>
                <div className = "form-group">
              	<input type="text" className="form-control" placeholder ="Title" name="title"/>
                </div>
                <div className = "form-group">
              	<input type="text" className="form-control" placeholder ="Amount" name="amount"/>
                </div>
                <button type="submit" className="btn btn-primary">Create Record</button>
            </form>
          )
      }
  }

添加字段,将三个格子填满时,才可以点击确认按钮

• 添加constructor()构造方法
• 如何判断三个都有值才能点亮按钮 ,此时写一个方法 valid()
• <button disabled = {true}>Create Record</button>
• disabled = {true} 表示:按钮默认不可点
• 使用disabled = {!this.valid()}对valid()方法取反,使按钮可点
• valid加括号()表示要执行这个方法

  import React, { Component } from 'react';
  export default class RecordForm extends Component {
    constructor(props){
      super(props);
      this.state = {
        date:"",
        title:"",
        amount:""
      }
    }
  
    //这个方法用来判断三个框同时有值是否有效
    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" placeholder ="Date" name="date" value = {this.state.date}/>
                </div>
                <div className = "form-group">
              	<input type="text" className="form-control" placeholder ="Title" name="title" value = {this.state.title}/>
                </div>
                <div className = "form-group">
              	<input type="text" className="form-control" placeholder ="Amount" name="amount" value = {this.state.amount}/>
                </div>
                <button type="submit" className="btn btn-primary" disabled = {!this.valid()}>Create Record</button>
            </form>
          )
      }
  }

此时发现无论点击什么按钮都无法操作输入框的值

• 这时要添加onChange()方法

• ...
  //创建handleChange()方法
   handleChange(event){
     let name, obj;
     name = event.target.name;
     this.setState((
       obj = {},
       obj["" + name] = event.target.value,
       obj
     ))
   }
   ...
  

+ `RecordForm.js`现在的完整代码

  ```js
  import React, { Component } from 'react';
  export default class RecordForm extends Component {
    constructor(props){
      super(props);
      this.state = {
        date:"",
        title:"",
        amount:""
      }
    }
  
    //这个方法用来判断三个框同时有值是否有效
    valid(){
      return this.state.date && this.state.title && this.state.amount;
    }
  
    //创建handleChange()方法
    handleChange(event){
      let name, obj;
      name = event.target.name;
      //console.log( event.target.name);//date title amount
      this.setState((
        obj = {},
        obj["" + name] = event.target.value,
        obj
      ))
      //console.log(event.target.value);
    }
      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>
          )
      }
  }

• 将值输入完整发现可以点击按钮了

https://github.com/lenvo222/06_CreateForm.git