test.jsx

class Price extends React.Component {
  constructor(props) {
    super(props)
    this.termId = 0
    this.facultyId = 0
    this.bstOptions = {
      onAddRow: (row) => this._onAddRow(row),
      afterDeleteRow: (rowKeys) => this._afterDeleteRow(rowKeys)
    }
    this.bstSelectRow = {
      mode: 'checkbox'
    }
    this.bstCellEdit = {
      mode: 'dbclick',
      blurToSave: true,
      beforeSaveCell: (row, cellName, cellValue) => this._beforeSaveCell(row, cellName, cellValue),
      afterSaveCell: (row, cellName, cellValue) => this._afterSaveCell(row, cellName, cellValue)
    }
    this.bstSelectRow = {
      mode: 'checkbox'
    }
    // TODO: kindsはコードマスタから取得するように要変更
    this.state = {
      kinds: [{value: 0, text: '入学時納入金'}, {value: 1, text: '履修申し込み'}, {value: 2, text: '学籍管理理科'}, {value: 3, text: 'シニア割引'}, {value: 4, text: 'デポジット'}],
      selected: 0,
      terms: [],
      prices: [{data-val:0, value:"20000"}, {data-val:1,value:"00"}, {data-val:2,(value:"12000"),(value:"6000")},
              {data-val:3,(value:"109000"),(value:"99000")}, {data-val:4, value:"3000"}]
    }
  }

  // **************************************************
  //  override
  // **************************************************
  componentWillMount() {
  }

  componentDidMount() {
    this._initTermOption()
    this._getPrices()
  }

  // **************************************************
  //  render
  // **************************************************
  // TODO: selectのプルダウンを変更しても、選択されたテキストが表示されないので要修正
  render() {
    return (
      <div>
        <select className='form-control container-header-select' value={this.state.termId} onChange={(e) => this._changeTerm(e)}>{this.state.terms}</select>
        <br />
        <BootstrapTable
          data={this.state.prices}
          cellEdit={this.bstCellEdit}
          options={this.bstOptions}
          selectRow={this.bstSelectRow}
          insertRow
          deleteRow
          condensed
          hover
          search
          pagination
          exportCSV
          csvFileName='学費設定一覧.csv'>
          <TableHeaderColumn dataField='id' isKey={true} hidden hiddenOnInsert></TableHeaderColumn>
          <TableHeaderColumn dataField='term_id' hidden hiddenOnInsert></TableHeaderColumn>
          <TableHeaderColumn dataField='kind' editable={{type: 'select', select: {class:'parent'}, options: {class:"msg", {values: this.state.kinds}}}} dataFormat={(cell, row) => this._kindFormatter(cell, row)}>区分</TableHeaderColumn>
          <TableHeaderColumn dataField='name' editable={{type: 'text', validator: this._requiredValidator}}>名称</TableHeaderColumn>
          <TableHeaderColumn dataField='price' editable={{type: 'value', select: {class:'child'}, validator: this._numValidator, options: {class:"msg", {values: this.state.prices}}}} dataFormat={(cell, row) => this._priceFormatter(cell, row)}>価格</TableHeaderColumn>
          <TableHeaderColumn dataField='limit_at' editable={{type: 'date'}}>支払期限</TableHeaderColumn>
          <TableHeaderColumn dataField='memo' editable={{type: 'textarea'}}>説明</TableHeaderColumn>
        </BootstrapTable>
      </div>
    )
  }

  // **************************************************
  //  table view
  // **************************************************
  _kindFormatter(cell, row) {
    // TODO: 対象の配列分（ここではthis.state.kinds）呼ばれる！？
    const code = this.state.kinds.filter((t) => {
      return (t.value === cell * 1)
    })
		console.log(code[0])
		if (code[0] == undefined)
			return ""
    return code[0].name
  }

  _priceFormatter(cell, row) {
    const code = this.state.prices.filter((t) => {
      return (t.value === cell * 1)
    })
    var $children = $('.children')
    var original = $children.html()
    $('.parent').change(function() {
      var val1 = $(this).val()
      $children.html(original).find('option').each(function() {
        var val2 = $(this).data('val')
        if (val1 != val2) {
          $(this).not('optgroup,.msg').remove()
        }
      })
      if ($(this).val() === '') {
        $children.attr('disabled', 'disabled');
        } else {
          $children.removeAttr('disabled');
      }
    });
  });

  // **************************************************
  //  table action
  // **************************************************
  _onAddRow(row) {
    console.log('--- on add ---')

    row.authenticity_token = this.props.csrfToken
    row.term_id = this.termId
    if (row.limit_at == '') delete row.limit_at

    console.dir(row)

    // 登録処理
    $.post(Routes.expense_price_create_path({format: 'json'}), row)
      .done((data) => {
        console.dir(data)
        this.setState({
          prices: data
        })
      })
      .fail((data) => {
        console.log('price create error:' + data)
      })
  }

  _beforeSaveCell(row, cellName, cellValue) {
    console.log('--- before save cell ---')
  }

  _afterDeleteRow(rowKeys) {
    console.log('--- after delete row ---')
    console.dir(rowKeys)

    params = {
      authenticity_token: this.props.csrfToken,
      term_id: this.termId,
      ids: rowKeys
    }

    console.dir(params)

    // 削除処理
    $.post(Routes.expense_price_delete_path({format: 'json'}), params)
      .done((data) => {
        console.dir(data)
        this.setState({
          prices: data
        })
      })
      .fail((data) => {
        console.log('price delete error:' + data)
      })
  }

  _afterSaveCell(row, cellName, cellValue) {
    console.log('--- after save cell ---')

    row.authenticity_token = this.props.csrfToken

    // 更新処理
    $.post(Routes.expense_price_update_path({format: 'json'}), row)
      .done((data) => {
        console.dir(data)
        this.setState({
          prices: data
        })
      })
      .fail((data) => {
        console.log('price create error:' + data)
      })
  }

  _numValidator(value, row) {
    const nan = isNaN(parseInt(value, 10));
    if (nan) {
      return '数値で入力して下さい'
    }
    return true
  }

  _requiredValidator(value, row) {
    if (value == '') {
      return '必須入力'
    }
    return true
  }

  // **************************************************
  //  private
  // **************************************************
  _initTermOption() {
    let selected = 0
    let terms = []

    for (const term of this.props.terms) {
      const start = new Date(term.start_at).getTime()
      const end = new Date(term.end_at).getTime()
      const now = new Date().getTime()

      // 期間内のものを選択とする
      if (start <= now && now < end) {
        selected = term.id
        this.termId = term.id
      }

      // optionタグを追加
      terms.push(<option key={term.id} value={term.id}>{term.name}</option>)
    }

    // 反映
    this.setState({
      selected: selected,
      terms: terms
    })
  }

  _getPrices() {
    console.log('--- get prices ---')
    const params = {
      authenticity_token: this.props.csrfToken,
      term_id: this.termId
    }
    console.dir(params)

    // 検索処理
    $.post(Routes.expense_price_select_path({format: 'json'}), params)
      .done((data) => {
        console.dir(data)
        this.setState({
          prices: data
        })
      })
      .fail((data) => {
        console.log('price select error:' + data)
      })
  }

  _changeTerm(e) {
    this.termId = e.target.value
  }
}