Question

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

示例：

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

我有“保存”按钮，当我点击保存时，我想获得渲染输入文本的值。有人有想法吗？

以下是我的代码。它不像上面的例子。我渲染一个表=＆gt; table list =＆gt; list item =＆gt;选择选项。所以我想在表中获得所有选择值：

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。

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

1 个答案: