如何在反应js中另一个下拉值的onchange上动态添加下拉值？答案

【问题标题】：How to add dropdown values dynamically on onchange of another dropdown values in react js?如何在反应js中另一个下拉值的onchange上动态添加下拉值？
【发布时间】：2019-10-15 19:17:19
【问题描述】：

 componentDidMount(){
  this.setState({
      values2:[{ name:  'Q1', id: 1 },
                  { name: 'Q2', id: 2 },
                  { name: 'Q3', id: 3 },
                  { name: 'Q4', id: 4 }]
    });

} setQuarterData(){

    var optionTemplate2 = this.state.values2.map(v => (
              <option value={v.id} key={v.id}>{v.name}</option>
            ));

    document.getElementById('quarter').innerHTML(optionTemplate2);
//  document.getElementById('quarter').style.background="red";
      console.log(optionTemplate2);
}

我在 optionTemplate2 中获取数据，但我无法在 select 中设置

0: {$$typeof: Symbol(react.element), type: "option", key: "1", ref: null, props: {…}, …} 1: {$$typeof: Symbol(react.element), type: "option", key: "2", ref: null, props: {…}, …} 2: {$$typeof: Symbol(react.element), type: "option", key: "3", ref: null, props: {…}, …} 3: {$$typeof: Symbol(react.element), type: "option", key: "4", ref: null, props: {…}, …} 长度：4 原型：数组（0）我想在这里设置：-

<Form.Group>
    <Form.Label>Quarters</Form.Label>
    <Form.Control as="select" id="quarter">

    </Form.Control>
  </Form.Group>

【问题讨论】：

向我们展示你目前拥有的东西，在这里粘贴一些代码
StackOverflow 不是免费的编码服务。请说明您到目前为止所做的尝试。

标签： reactjs

【解决方案1】：

class FirstComponent extends React.Component{
constructor(props){
    super(props);
    let todayDate = new Date();
    this.state = {
            finsclYear: [
                      { name: '2014-2015', id: "2014-03-31"},  
                      { name: '2016-2017', id: "2016-03-31" },
                      { name: '2017-2018', id: "2017-03-31" },
                      { name: '2018-2019', id: "2018-03-31" },
                      { name: '2019-2020', id: todayDate}
                    ],
            quarter:[ ],
            chartData:chartData[0],
            tableData: FilterTableCustom
    };
    this.setQuarterData=this.setQuarterData.bind(this);
    this.changeData=this.changeData.bind(this);

}

setQuarterData(el){ 
    let value=el.target.value;
    let quarter;
    let today = new Date(value);
    let month=today.getMonth();
    //calculating quarter for financial year

    if(month<12 && month>2){
         quarter = Math.floor(month / 3);
    }
    else{
         quarter = Math.floor((month+12) / 3);
    }

    let list2=document.getElementById("quarter");

     switch(quarter){
     case 1:
         this.setState({
          quarter:[{ name:  'Q1', id: 1 } ]

        });
         break;
     case 2:
         this.setState({
          quarter:[{ name:  'Q1', id: 1 },
                   { name: 'Q2', id: 2 } ]

        });
         break;
     case 3:
         this.setState({
          quarter:[{ name:  'Q1', id: 1 },
                      { name: 'Q2', id: 2 },
                      { name: 'Q3', id: 3 }]

        });
         break;
     case 4:
         this.setState({
          quarter:[{ name:  'Q1', id: 1 },
                      { name: 'Q2', id: 2 },
                      { name: 'Q3', id: 3 },
                      { name: 'Q4', id: 4 }]
        });
         break;
     default :
         null
     }

}
changeData(){
    this.setState({
        chartData:chartData2[0],
        tableData: FilterTableCustom2       
        });
}
render(){
    const {tableData}=this.state;
    const {chartData}=this.state;
    console.log(tableData);
    const {quarter} =this.state;
    let finsclYearData = this.state.finsclYear.map(v => (
              <option value={v.id} key={v.id}>{v.name}</option>
            ));
    let quarterData="";

    if(quarter.length!=0){

     quarterData =quarter.map(v => (
              <option value={v.id} key={v.id}>{v.name}</option>
            ));

    }

【讨论】：