ReactJS 根据第一个下拉列表选择的值使用 ajax 填充下拉列表

Question

所以我遇到了这篇关于类似问题的帖子，https://stackoverflow.com/a/48078627 答案是正确的，但它是在 javascript 中，我怎样才能将其转换为 react 将如何处理这段代码的方式。

下面是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 和 web 开发的新手，如果你能在这个问题上启发我，那就太好了。提前非常感谢。

Answer 1

我已经使用 useState 和 useEffect 钩子创建了一个 sample 来实现所需的行为，但还有很多其他方法可以做到这一点。

一开始，我将options 声明为常量对象，keys 等于第一个选择的值。

编辑 2： 根据作者的要求，我更新了从远程服务器获取数据的示例，而不是使用常量。

然后使用useState我处理第一个选择的用户选择。当这个值改变时，我会查看我的数据状态，寻找合适的数据数组。

我强烈建议您查看React hooks 了解更多详情。

编辑：我在提供的代码上添加了一些 cmets，逐步解释了该过程。

Answer 2

您可以在选择第一个下拉列表时将第一个下拉列表的value 存储到state 中。 然后您将第二个下拉列表的options 基于state。