Question

 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 proto ：数组（0）我想在这里设置它：-

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

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

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

    }

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

1 个答案: