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

Question

目前，我在从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>
    );
  }
});

Answer 1

我看到您需要像LinkedStateMixin这样的东西

var LinkedStateMixin = require('react-addons-linked-state-mixin');

var WithLink = React.createClass({
  mixins: [LinkedStateMixin],
  getInitialState: function() {
    return {message: 'Hello!'};
  },
  render: function() {
    return <input type="text" valueLink={this.linkState('message')} />;
  }
});

或者，您可以使用lodash自己创建它，而您不需要mixin。

linkState(propertyPath) {
    return {
        value: _.get(this.state, propertyPath),
        requestChange: value => this.setState(_.set(_.clone(this.state), propertyPath, value))
    };
}

我的版本的最大区别是您现在可以放弃嵌套路径，例如

<TextInput label="Name" valueLink={this.linkState('branch.name')} />
<CheckBox label="Name" checkedLink={this.linkState('branch.name')} />

注意：如果您将valueLink用于复选框，请改用checkedLink。