输入集上的粗鲁行为 - 反应+通量+ alt + es6

Question

我是新手做反应。在我的应用程序中，我必须在form.Form中使用一个输入集加载默认值来对inputset执行crud操作（包含一个selectbox和textarea）。

操作

1. 输入设置文本的更改，如果不应该更新状态 存储默认值。
2. OnAdd它应检查前一个元素是否为空描述。
3. 应删除paricular inputSet并清除说明 它也应该删除那个inputSet

图片：

代码：

项目

import React from 'react';
import { Input, Button, Glyphicon } from 'react-bootstrap';

export default class TextBoxesSet extends React.Component {
  constructor(props) {
    super(props);
  }
  _onRemoveName = () => {
    console.log('remove');
  }
  static getPropsFromStores() {
    return {language: 'en', description: ''};
  }

  render() {
    return (
      <div >
        <div className="">
          <Input type="select" placeholder="select" wrapperClassName="col-xs-4"
          value={this.props.language} onChange={this.handleChange.bind(this, 'language')} >
            <option value="en">en</option>
            <option value="de">de</option>
          </Input>
        </div>
        <div className="col-md-7">
          <Input type="textarea" wrapperClassName="col-xs-12" value={this.props.description}
          onChange={this.handleChange.bind(this, 'description')} />
        </div>
        <div className="col-md-1">
          <Button bsSize="small"><Glyphicon glyph="remove" onClick={this._onRemoveName} /></Button>
        </div>
      </div>
    );
  }
  handleChange(name, e) {
    const obj = {};
    obj[name] = e.target.value;
    this.setState(obj);
    if (this.state.language !== undefined && this.state.description !== undefined) {
      this.props.handleChange('name', this.state);
    }
  }
}
TextBoxesSet.propTypes = {
  language: React.PropTypes.string,
  description: React.PropTypes.string,
  handleChange: React.PropTypes.func
};

列表

import React from 'react';
import { Button, Glyphicon } from 'react-bootstrap';
// import TextBoxStore from 'stores/textBoxStore';
import TextBoxesSet from './descriptionTextBoxes';

export default class TextBoxesSetList extends React.Component {
  constructor(props) {
    super(props);
  }

  _onAddName = (label) => {
    if (this.state) {
      this.state[label].length++;
      React.render(<TextBoxesSet labelName="name" language="de" handleChange={this.handleTextBoxSetChange}/>, document.getElementById('another'));
    }
  }
  _onRemoveName = () => {
    console.log('remove');
  }
  render() {
    return (
      <div >
        <ul >
          <TextBoxesSet label={this.props.labelName} handleChange={this.props.handleChange}/>
        </ul>
        <div className="col-md-1">
          <Button bsSize="small"><Glyphicon glyph="plus" onClick={this._onAddName} /></Button>
        </div>
      </div>
    );
  }
 }
TextBoxesSetList.propTypes = {
  newItem: React.PropTypes.string,
  list: React.PropTypes.array,
  labelName: React.PropTypes.string,
  handleChange: React.PropTypes.func
};

表格

import React from 'react';
import { Input, Button, Glyphicon, ButtonToolbar } from 'react-bootstrap';
import AttributeSectionStore from 'stores/attributeSection/AttributeSectionStore';
import TextBoxesSetList from '../TextBoxesList';
import styles from 'scss/_common';

export default class Name extends React.Component {
  constructor(props) {
    super(props);
    this.handleTextBoxSetChange = this.handleTextBoxSetChange.bind(this);
  }
  _onCreate = () => {
    console.log('___________', this.state);
  }
  static getPropsFromStores() {
    return AttributeSectionStore.getState();
  }
  render() {
    return (
      <div className="container">
        <div className={styles.mainheader}>
          <h2 >New Form</h2>
        </div>
        <div className="col-md-9">
        <form className="form-horizontal">
          <div className="row">
            <div className="col-xs-2">
              <label className="">Name</label>
            </div>
            <div className="col-md-6">
              <TextBoxesSetList labelName="name" handleChange={this.handleTextBoxSetChange}/>
            </div>
          </div>
        </form>
        </div>
      </div>
    );
  }
  handleChange(name, e) {
    const change = {};
    change[name] = e.target.value;
    this.setState(change);
  }
  handleTextBoxSetChange(label, obj) {
    const change = {};
    if (this.state[label] === undefined) {
      console.log('--------------------');
      change[label] = [];
      change[label].push(obj);
    }
    this.setState(change);
  }
}

Name.propTypes = {
    name: React.PropTypes.arrayOf(React.PropTypes.object)
};

请帮我解决？