Как динамически добавлять выпадающие значения при изменении других выпадающих значений в реакции 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.info(optionTemplate2);
}

я получаю данные в optionTemplate2, но я не могу установить в select

0: {$$typeof: Symbol(react.element), тип: «option», ключ: «1», ссылка: null, реквизиты: {…}, …} 1: {$$typeof: Symbol(react.element), тип: «опция», ключ: «2», ссылка: null, реквизиты: {…}, …} 2: {$$typeof: Symbol(react.element), тип: «опция», ключ: «3», ссылка: null, реквизиты: {…}, …} 3: {$$typeof: Symbol(react.element), тип: «опция», ключ: «4», ссылка: null, реквизиты: {…}, …} длина: 4 прото: Массив (0) я хочу установить его здесь: -

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

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

покажите нам, что у вас есть, вставьте сюда код

— 30.05.2019 08:45

StackOverflow не является бесплатной службой кодирования. Пожалуйста, объясните, что вы пробовали до сих пор.

— 30.05.2019 09:23

reactjs

30.05.2019 08:44

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

157

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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.info(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>
            ));

    }

03.06.2019 13:01

Другие вопросы по теме

Как непрерывно передавать данные между двумя независимыми классами в реакции js?

Загрузите файл dicom с краеугольным камнем js из корзины S3 в AWS

Лучшая практика обработки данных из вызова API и рендеринга компонентов React

Как правильно изменить состояние множественного вложенного массива объектов в React?

Извлечение данных в компоненте в зависимости от файла cookie

Как я могу динамически загружать значок, используя его имя змеиного случая (React, material-ui)

React Hook useEffect для извлечения и публикации в Backend (API)?

Как я могу преобразовать сумму минут, часов в «timelite.js» или «moment.js»?

Разрешить относительный путь от node_modules до папки Dist с помощью Webpack

React js - изменение состояния при клике из массива значений - ошибка «Неперехваченное нарушение инварианта»

Как динамически добавлять выпадающие значения при изменении других выпадающих значений в реакции js?

Ответы 1

Другие вопросы по теме

Похожие вопросы