Reactjs多下拉列表

Question

我正在處理React JS項目。我有4個下拉按鈕（選擇選項）。所有的下拉菜單都將動態地從數據庫中獲取。所以想知道什麼是正確的實施方法。

最初我只有1個下拉框，所以通過ajax調用實現它，並在<select>標籤下附加<option>標籤的值。現在我還有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。