在 Reactjs 中创建依赖字段
Creating dependant fields in Reactjs?
这就是我渲染的内容
<select>
<option>1</option>
<option>2</option>
</select>
从下拉列表中选择任何选项。我必须渲染另一个下拉列表旁边。
<select>
<option>1</option>
<option>2</option>
</select>
<select>
<option>1.1</option>
<option>1.2</option>
</select>
然后从第二个下拉列表中选择选项。我必须在它旁边呈现文本类型的输入字段。
我如何在反应中实现这一点?
var React = require('react');
var ReactDOM = require('react-dom');
var View = React.createClass({
getInitialState: function() {
return {
value: '------'
}
},
handleChange: function(event){
this.setState({value: event.target.value});
this.getFields(event.target.value);
},
handleClick : function(){
},
render : function(){
return (<div>
<p>
<i className="plusSymbol fa fa-minus-circle"></i>
<select onChange={this.handleChange} value={this.state.value} className="js-example-basic-single">
<option value="">------</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</p>
<p>
<i onClick={this.handleClick} className="plusSymbol fa fa-plus-circle"></i>
<span>Add a new condition</span>
</p>
</div>);
}});
module.exports = View;
所以我的视图应该看起来像这样 [下拉列表][下拉列表][文本字段]
以下示例应为您指明正确的方向...
var Hello = React.createClass({
getDefaultProps: function () {
return {
fieldMap: {
"1": [
{ value: "1.1", label: "1.1" },
{ value: "1.2", label: "1.2" }
],
"2": [
{ value: "2.1", label: "2.1" },
{ value: "2.2", label: "2.2" }
]
}
}
},
getInitialState: function() {
return {
firstValue: '',
secondValue: '',
thirdValue: ''
}
},
getOptions: function (key) {
if (!this.props.fieldMap[key]) {
return null;
}
return this.props.fieldMap[key].map(function (el, i) {
return <option key={i} value={el.value}>{el.label}</option>
});
},
handleFirstLevelChange: function (event) {
this.setState({
firstValue: event.target.value,
secondValue: '',
thirdValue: ''
});
},
handleSecondLevelChange: function (event) {
this.setState({
secondValue: event.target.value,
thirdValue: ''
});
},
handleThirdLevelChange: function (event) {
this.setState({
thirdValue: event.target.value
});
},
getSecondLevelField: function () {
if (!this.state.firstValue) {
return null;
}
return (
<select onChange={this.handleSecondLevelChange} value={this.state.secondValue}>
<option value="">---</option>
{this.getOptions(this.state.firstValue)}
</select>
)
},
getThirdLevelField: function () {
if (!this.state.secondValue) {
return null;
}
return (
<input type="text" onChange={this.handleThirdLevelChange} value={this.state.thirdValue} />
)
},
render: function() {
return (
<div>
<select onChange={this.handleFirstLevelChange} value={this.state.firstValue}>
<option value="">---</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
{this.getSecondLevelField()}
{this.getThirdLevelField()}
</div>
);
}
});
在 https://jsfiddle.net/27u9Lw4t/1/上观看直播
相关文章:
- 如何隐藏&使用jQuery禁用依赖于另一个字段值的字段
- Rails 4-具有依赖字段Rails的条件JS
- yii2:依赖于Action的条件显示/显示字段
- Ember-自定义计算属性,用于检查是否存在所有依赖字段
- AngularJS,如何使UI依赖于哪个字段具有焦点
- 角度 - 依赖字段验证
- 轨道 4 - JS 用于具有简单形式的依赖字段
- 在 Reactjs 中创建依赖字段
- 角度:验证多个依赖字段
- 可以't访问require.js中的依赖对象字段-无法读取未定义的属性
- Knockout.js text相互依赖的输入字段
- Rivets.js属性依赖于几个字段
- 在Ember控制器中使用依赖注入字段
- 在依赖于另一个字段选择的窗体中隐藏表的某个部分
- AngularJS中带依赖字段的表单验证
- LiveCycle -多个计算依赖于选中的复选框和输入字段
- 两个相互依赖的选择字段
- 添加相互依赖的签出字段
- 添加额外的字段依赖于其他查询的查询结果在mongodb中,使用mongojs
- 在我的表单中创建依赖字段