ReactJS заполнить раскрывающийся список на основе выбранного значения первого раскрывающегося списка с помощью ajax - PullRequest
Новая
       4

ReactJS заполнить раскрывающийся список на основе выбранного значения первого раскрывающегося списка с помощью ajax

0 голосов
/ 11 января 2020

Итак, я наткнулся на этот пост относительно этого похожего вопроса, { ссылка } ответ был верным, но он находится в javascript, как я могу преобразовать его в способ, которым реагирует на этот кусок code.

Ниже приведен код в javascript

<select id="sel" onchange="ChangeList()"> 
  <option value="">select</option> 
  <option value="I">Integer</option> 
  <option value="A">Alphabet</option> 
</select> 

<select id="type"></select> 

<script>
var IntandAlph = {};
IntandAlph['I'] = ['1', '2', '3','4','5','6','7','8','9','10'];
IntandAlph['A'] = ['A', 'B', 'C', 'D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];

function ChangeList() {
    var selList = document.getElementById("sel");
    var typeList = document.getElementById("type");
    var seltype = selList.options[selList.selectedIndex].value;
    while (typeList.options.length) {
        typeList.remove(0);
    }
    var Num = IntandAlph[seltype];
    if (Num) {
        var i;
        for (i = 0; i < Num.length; i++) {
            var sel = new Option(Num[i], i);
            typeList.options.add(sel);
        }
    }
} 
</script>

</body>
</html>

Я также новичок в React и веб-разработке, было бы здорово, если бы вы могли рассказать мне об этой проблеме. Большое спасибо заранее.

Ответы [ 2 ]

0 голосов
/ 11 января 2020

Я создал образец , используя useState и useEffect хуки для достижения желаемого поведения, но есть много других способов сделать это.

При запуске , Я объявляю options как постоянный объект, с keys, равным значениям первого выбора.

РЕДАКТИРОВАТЬ 2: После запроса автора, я ' обновил мой пример выборки данных с удаленного сервера вместо использования константы.

Затем, используя useState, я обрабатываю выбор пользователя первым выбором. Когда это значение изменяется, я проверяю состояние данных для соответствующего массива данных.

Я настоятельно рекомендую вам взглянуть на React hooks для получения более подробной информации.

РЕДАКТИРОВАТЬ: Я добавил несколько комментариев к предоставленному коду, объясняя шаг за шагом процесс.

0 голосов
/ 11 января 2020

Вы можете сохранить value первого раскрывающегося списка в state после выбора первого раскрывающегося списка. И тогда вы основываете options второго выпадающего списка на state.

...