如何在reactJS中获取动态输入文本的值

目前我在ReactJS中遇到了从动态组件获取值的问题。

示例：

我有5个复选框：A, B, C, D, E。当我选中A复选框时，我希望添加新的输入文本A，当我选中B以添加新的输出文本B等等。当我取消选中复选框时我希望删除相应的输入文本。

我有一个按钮"保存"，当我点击保存时，我想得到渲染输入文本的值。有人有想法吗？

以下是我的代码。它并不像上面的例子。我渲染了一个表=>表列表=>列表项=>选择选项。所以我想得到表中所有的选择值：

var React = require('react');
var AssignmentTranslatorItem = React.createClass({
  getInitialState: function () {
    return {
      selectedItem: -1
    };
  },
  componentDidMount: function () {
    return {};
  },
  renderTranslator: function(translatorList) {
    var items = []
    var arrTrans = translatorList.arrTrans
    var selectedItem = translatorList.selectedItem
    if(selectedItem == -1)
      items.push(<option value="-1" selected>(Select Translator)</option>)
    else
      items.push(<option value="-1">(Select Translator)</option>)
    for (var i in arrTrans) {
      if(selectedItem == arrTrans[i].id)
        items.push(<option value={arrTrans[i].id} selected>{arrTrans[i].username}</option>)
      else
        items.push(<option value={arrTrans[i].id}>{arrTrans[i].username}</option>)
    }
    return items
  },
  render: function () {
    return (
      <tr>
        <td>{this.props.languageName}</td>
        <td>
          <select className="form-control" ref="translatorList">
            {this.renderTranslator(this.props.translatorList)}
          </select>
        </td>
      </tr>
    );
  }
});
var AssignmentTranslatorList = React.createClass({
  render: function () {
    var tmp = this.props.data.map(function (obj, index) {
      return (
        <AssignmentTranslatorItem languageName={obj.lang.name} translatorList={obj} key={index}></AssignmentTranslatorItem>
      );
    });
    return (
      <tbody>
      {tmp}
      </tbody>
    );
  }
});
module.exports = React.createClass({
  getInitialState: function () {
    return {
      data: [
        {
          "lang": {
            "id": 1,
            "name": "English"
          },
          "arrTrans": [
            {
              "id": 3,
              "username": "hhuihuihiuhuihiuh"
            },
            {
              "id": 4,
              "username": "zcdscac"
            }
          ],
          "selectedItem": 4
        },
        {
          "lang": {
            "id": 2,
            "name": "French"
          },
          "arrTrans": [
            {
              "id": 3,
              "username": "hhuihuihiuhuihiuh"
            }
          ],
          "selectedItem": -1
        }
      ]
    };
  },
  componentDidMount: function () {
  },
  render: function () {
    return (
      <div className="table-responsive">
        <table className="table table-bordred table-striped">
          <thead>
          <tr>
            <th>Language</th>
            <th>Assigned Translator</th>
          </tr>
          </thead>
          <AssignmentTranslatorList data={this.state.data} ref='assignTranslatorList'></AssignmentTranslatorList>
          <tfoot>
            <tr>
              <td></td>
              <td>
                <button type="button" className="btn btn-success">
                  Assign
                </button>
              </td>
            </tr>
          </tfoot>
        </table>
        <div className="clearfix"></div>
      </div>
    );
  }
});