如何获取动态输入文本的价值在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创建它，你不会需要的混入。

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代替。