如何在React JS中另一个下拉值的变化时动态添加下拉值?

 收藏
 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),类型:“ option”,键:“ 1”,ref:null,props:{…},…} 1:{$$ typeof:Symbol(react.element),类型:“ option”,键:“ 2”,ref:null,props:{…},…} 2:{$$ typeof:Symbol(react.element),类型:“ option”,键:“ 3”,ref:null,props:{…},…} 3:{$$ typeof:Symbol(react.element),类型:“ option”,键:“ 4”,ref:null,props:{…},…} 长度:4 原型:数组(0)  我想在这里设置:

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

    </Form.Control>
  </Form.Group>
回复
  • 糖长老 回复

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