[英]How to get value of dynamic input text in reactJS
At the present I got an issue with getting value from dynamic component in ReactJS. 目前,我在从ReactJS的动态组件获取价值方面遇到了一个问题。
Example: 例:
I have 5 checkbox: A, B, C, D, E
. 我有5个复选框:
A, B, C, D, E
。 When I check the A
checkbox, I want to add new input text A
, when I check the B
to add a new input text B
and so on. 当我选中
A
复选框时,我想添加新的输入文本A
,当我选中B
时添加新的输入文本B
,依此类推。 When I uncheck a checkbox I want to delete the corresponding input text. 取消选中复选框时,我想删除相应的输入文本。
I have button "Save", and when I click save I want to get value of rendered input text. 我有“保存”按钮,当我单击“保存”时,我想获取渲染的输入文本的值。 Any one have ideas?
有人有想法吗?
The following is my code. 以下是我的代码。 It's not really like the above example.
这不是真的像上面的示例。 I render a table => table list => list item => select option.
我渲染一个表=>表列表=>列表项=>选择选项。 So I want to get all select value in table:
所以我想获得表中的所有选择值:
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>
);
}
});
I see you need something along the likes of LinkedStateMixin 我看到您需要像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')} />;
}
});
Or you can create it yourself with lodash and you wont need the mixin. 或者,您可以使用lodash自己创建它,而您不需要mixin。
linkState(propertyPath) {
return {
value: _.get(this.state, propertyPath),
requestChange: value => this.setState(_.set(_.clone(this.state), propertyPath, value))
};
}
the big difference with my version is that you can now can give up nested paths like 我的版本的最大区别是您现在可以放弃嵌套路径,例如
<TextInput label="Name" valueLink={this.linkState('branch.name')} />
<CheckBox label="Name" checkedLink={this.linkState('branch.name')} />
NOTICE: if you are using valueLink for checkboxes then use checkedLink instead. 注意:如果您将valueLink用于复选框,请改用checkedLink。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.