Question

我正在研究React JS项目。我有4个下拉按钮（选择选项）。所有下拉列表都将动态地来自DB。所以想知道什么是正确的实施方法。

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

请在这里建议。因为我不想以错误的方式实施并再次回归。

Answer 1

如果您为下拉列表创建一个小组件，请执行以下操作：

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 https://github.com/mzabriskie/axios。

Reactjs多次下拉

1 个答案: