日別アーカイブ: 2017年10月3日

react-bootstrap-tableでselect入力項目のvalueとtext

react-bootstrap-tableのselect入力項目のkey,valueを設定する方法のメモ。

editableでtype: ‘select’でvaluesを設定する方法は公式のドキュメントであるけれども、valueとtextを使う方法が記載されておらずソースを見て調査。

class Kind extends React.Component {
  constructor() {
    super()
    this.state = {
      kinds: [{value: 1, text: '種類A'}, {value: 2, text: '種類B'}, {value: 3, text: '種類C'}]
    }
  }

  render() {
    return (
      <div>
        <BootstrapTable>
          <TableHeaderColumn dataField='kind' editable={{type:'select', options: {values: this.state.kinds}}} dataFormat={}>種類</TableHeaderColumn>
        </BootstrapTable>
      </div>
    )
  }
}

key項目とか記載省略。テーブル上の表示はdataFormatなどで加工する必要があるかも。