Javascript 多下拉列表

我在做React JS项目。我有4个下拉按钮选择选项。所有的下拉列表都将动态地从DB中获取。所以我想知道什么是正确的实现方法

最初我只有一个下拉框，所以用ajax调用实现它，并在标记下用标记附加值。现在我还有3个下拉列表，所以我需要为所有4个框调用多个ajax调用吗？或者有没有其他方法来实现它

---

请在这里提出建议。因为我不想以错误的方式实现并再次恢复

如果为下拉列表创建一个小组件，如下所示：

import React, { Component } from 'react';

class SelectOption extends Component {
    render() {
        return (
            <option value={this.props.dataItem.key}>{this.props.dataItem.val}</option>
        )
    }
}

class SimpleDropdown extends Component {

    render() {

        let options = [];

        if (this.props.selectableData) {
            const selectableData = this.props.selectableData;
            options = selectableData.map((dataItem) =>
                <SelectOption key={'option_' + dataItem.key} dataItem={dataItem} />
            );
        }

        return (
            <div>
                <select onChange={this.props.handleInputChange} name={this.props.name} >
                    {options}
                </select>
            </div>
        )
    }
}

export default SimpleDropdown;

您可以在父组件中使用它，类似于这样的

import React, { Component } from 'react';

import SimpleDropdown from './common/SimpleDropdown';


class Parentextends Component {

    componentDidMount() {
        // here you handle your ajax call or calls, depending on what you choose to go with
    }

    handleInputChange = (e) => {

        const target = e.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;

        this.setState({
            [name]: value
        });
    }


    render() {

        const ajaxResultFirst = ajaxResult.First;
        const ajaxResultSecond = ajaxResult.Second;
        const ajaxResultThird = ajaxResult.Third;
        const ajaxResultFourth = ajaxResult.Fourth;

        return (
            <section className="form">

                    <SimpleDropdown
                        name="FirstDropdown"
                        selectableData={ajaxResultFirst}
                        handleInputChange={this.handleInputChange}
                    />
                    <SimpleDropdown
                        name="SecondDropdown"
                        selectableData={ajaxResultSecond}
                        handleInputChange={this.handleInputChange}
                    />
                    <SimpleDropdown
                        name="ThirdDropdown"
                        selectableData={ajaxResultThird}
                        handleInputChange={this.handleInputChange}
                    />
                    <SimpleDropdown
                        name="FourthDropdown"
                        selectableData={ajaxResultFourth}
                        handleInputChange={this.handleInputChange}
                    />

            </section>
        );
    }
};

export default Parent;

---

这样的办法应该行得通。但我仍然建议使用不同于jquery的插件来发出ajax请求，我的第一选择是axios。

除非它们存储在不同的位置，否则您应该能够通过一次ajax调用获得所需的值，然后将结果存储在应用程序状态。您的所有下拉值是否相互独立？另外，为什么要将JQuery与reactjs一起使用？是的，所有的值都是相互独立的。Jquery只是一个带有ajax调用的函数。您可以创建一个公共组件，并在执行ajax调用后调用它。会干净得多。如果每个下拉列表都不同，并且具有来自不同集合的不同选项，那么您肯定需要查询每个下拉列表。为什么不在一个ajax调用中返回所有数据，如下所示：{option1:[]，option2:[]，option3:[]，option4:[]}