0
目前我遇到了從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>
);
}
});
請提供一些代碼=請嘗試。 – morels
對不起,只是更新我的代碼,請參閱:) –
你的問題是,如何獲得文本輸入的價值,對不對?爲什麼不把這些值存儲爲狀態呢? – FranBran