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

Question

所以我就这个类似的问题碰到了这篇文章，https://stackoverflow.com/a/48078627答案是正确的，但是它是在javascript中，我如何将其转换为反应如何处理这段代码的方式。

下面是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

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

Answer 2

我使用sample和useState钩子创建了useEffect以实现所需的行为，但是还有很多其他方法可以实现。

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

EDIT 2：

在作者的请求之后，我更新了从远程服务器获取数据的示例，而不是使用常量。

然后使用useState，我将处理第一选择的用户选择。当该值更改时，我将查看数据状态，以获取适当的数据数组。

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

EDIT：

我在提供的代码中添加了一些注释，逐步说明了该过程。