Reactjs Multiple Dropdown

Question

Ich arbeite an React JS-Projekt. Ich habe 4 Dropdown-Taste (Option auswählen). Und das gesamte Dropdown wird dynamisch von DB kommen. Ich wollte also wissen, welche Methode die richtige ist.

Zunächst hatte ich nur 1 Dropdown-Box, so implementiert es mit Ajax-Aufruf und fügen Sie die Werte mit <option> Tag unter <select> Tag. Jetzt habe ich noch 3 Dropdown, muss ich also mehrere Ajax-Anrufe für alle 4-Box anrufen? Oder gibt es andere Möglichkeiten, es zu implementieren?

Bitte schlagen Sie hier vor. Weil ich nicht falsch implementieren und wieder zurückkehren möchte.

Answer 1

Wenn Sie eine kleine Komponente für die Dropdown-Listen erstellen, etwa so:

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; 

Sie es in Ihrer Mutter Komponente verwenden können, so etwas wie dieses ...

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; 

So etwas sollte Arbeit. Aber ich empfehle immer noch ein anderes Plugin als jQuery zu verwenden, um Ajax-Anfragen zu stellen, meine erste Wahl ist axios https://github.com/mzabriskie/axios.