点击添加按钮--出现一个框框（类似于添加学习经历-本科-研究生）

版权声明：本文为博主原创文章，未经博主允许不得转载，转载请注明地址。 https://blog.csdn.net/qq_33589252/article/details/82701972

import React, { Component } from "react";

class Inner extends Component {
  defaultValue = {
    taskDescription: "",
    vehicleClean: ""
  };
  constructor() {
    super();
    this.state = [
        {
          taskDescription: "",
          vehicleClean: ""
        }
      ];
  }

  changeClean = e => {
    let clean = e.target.value;
    console.log(this);
    this.setState({
      vehicleClean: this.state.vehicleClean.concat(clean)
    });
    console.log(this.state.vehicleClean);
  };
  changeDescription = e => {
    // console.log(e.target.value);
    let description = e.target.value;
    this.setState({
      taskDescription: description
    });
  };

  componentWillMount = () => {
    this.showInner();
  };

  showInner = () => {
    this.setState( this.state.push(Object.assign({}, this.defaultValue)));
    console.log(result);
    taskModel = result.map((item, index) => (
      <span key={index}>
        <select
          name="vehicleClean"
          className="vehicle-clean"
          onChange={e => this.changeClean(e)}
        >
          <option value="">请选</option>
          <option value="洗车">洗车</option>
          <option value="租车">租车</option>
          <option value="内饰">内饰</option>
          <option value="打蜡">打蜡</option>
          <option value="贴膜">贴膜</option>
        </select>
        <input
          type="text"
          name="taskDescription"
          className="taskZheng"
          value={this.state.description}
          onChange={e => this.changeDescription(e)}
        />
        <br />
      </span>
    ));
  };

  render() {
    return <span>{taskModel}</span>;
  }
}

export default class AddTask extends Component {
  constructor() {
    super();
    this.state = {
      taskWarn: "",
      taskHelper: ""
    };
  }

  addInner = e => {
    e.preventDefault();
    this.refs.get.showInner();
    this.setState({
      taskWarn: ""
    });
  };

  render() {
    return (
      <li>
        <label className="title">月任务量</label>
        <div className="table-content">
          <div className="task-container">
            <Inner ref="get" />
          </div>
          <button
            className="add-button"
            id="add-button"
            onClick={e => this.addInner(e)}
          >
            添加
          </button>
        </div>
        <div className="error">
          <span id="cleanWarn" className={this.state.taskWarn}>
            {this.state.taskHelper}
          </span>
        </div>
      </li>
    );
  }
}