在Reactjs中创建依赖字段? [英] Creating dependant fields in Reactjs?
本文介绍了在Reactjs中创建依赖字段?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这就是我呈现的内容
This is what i render
<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>
然后从第二个下拉列表中选择选项。我必须在其旁边呈现文本类型的输入字段。
then on selecting options from the second dropdown list.I must render input field of type text next to it.
我如何在反应?
How do i implement this in react?
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;
所以我的观点应该像这样[下拉列表] [下拉列表] [文本字段]
So my view should look like this [Dropdown][Dropdown][Text Field]
推荐答案
以下示例应指向正确的方向...
The following example should point you in the right direction...
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/
这篇关于在Reactjs中创建依赖字段?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文