Javascript 在Reactjs中创建从属字段？

这就是我所呈现的

1.
2.

从下拉列表中选择任何选项时。我必须呈现另一个下拉列表 它旁边的

1.
2.
1.1
1.2

然后，在从第二个下拉列表中选择选项时，我必须在其旁边呈现文本类型的输入字段

如何在react中实现此功能？

var React=require（'React'）；
var ReactDOM=require（'react-dom'）；
var View=React.createClass（{
getInitialState:函数（）{
返回{
值：'----'
}
},
handleChange:函数（事件）{
this.setState（{value:event.target.value}）；
this.getFields（event.target.value）；
},
handleClick:function（）{
},
render:function（）{
返回(

------
1.
2.


添加新条件

);
}});
module.exports=视图；

所以我的观点应该是这样的[下拉][下拉][文本字段]

---

下面的示例应该为您指出正确的方向

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>
    );
  }
});

var Hello=React.createClass({
getDefaultProps:函数（）{
返回{
现场地图：{
"1": [
{值：“1.1”，标签：“1.1”}，
{值：“1.2”，标签：“1.2”}
],
"2": [
{值：“2.1”，标签：“2.1”}，
{值：“2.2”，标签：“2.2”}
]
}
}
},
getInitialState:函数（）{
返回{
第一个值：“”，
第二个值：“”，
第三个值：“”
}
},
getOptions:函数（键）{
如果（！this.props.fieldMap[key]）{
返回null；
}
返回此.props.fieldMap[key].map（函数（el，i）{
返回{el.label}
});
},
HandleFirstLevel更改：函数（事件）{
这是我的国家({
firstValue:event.target.value，
第二个值：“”，
第三个值：“”
});
},
handleSecondLevelChange:函数（事件）{
这是我的国家({
第二个值：event.target.value，
第三个值：“”
});
},
handleThirdLevelChange:函数（事件）{
这是我的国家({
第三个值：event.target.value
});
},
getSecondLevelField:函数（）{
如果（！this.state.firstValue）{
返回null；
}
返回(
---
{this.getOptions（this.state.firstValue）}
)
},
GetThirdLevel字段：函数（）{
如果（！this.state.secondValue）{
返回null；
}
返回(
)
},
render:function（）{
返回(
---
1.
2.
{this.getSecondLevelField（）}
{this.getThirdLevelField（）}
);
}
});

---

现场观看

你能解释一下它是如何工作的吗，因为我是新来的反应者。嘿，我在小提琴上加了一些评论。如果第三级是多选下拉菜单，希望这能帮助您修改小提琴。我尝试添加了一个。但它不起作用。我无法选择多个选项。今晚我将对此进行研究…检查：）我使用了for循环来迭代多选字段：

<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>
    );
  }
});