Reactjs 복수 드롭 다운

Question

저는 React JS 프로젝트를 진행하고 있습니다. 4 개의 드롭 다운 버튼 (선택 옵션)이 있습니다. 모든 드롭 다운은 DB에서 동적으로 이루어집니다. 그래서 구현할 올바른 방법이 무엇인지 알고 싶었습니다.

처음에는 드롭 다운 상자가 1 개 밖에 없었으므로 AJAX 호출로 구현하고 <option> 태그의 값을 <select> 태그 아래에 추가했습니다. 이제 3 번 드롭 다운이 생겼으므로 4 번 상자 모두에 대해 여러 개의 아약스 호출을 호출해야합니까? 아니면 그것을 구현할 다른 방법이 있습니까?

여기에 제안하십시오. 나는 잘못된 방법으로 구현하고 다시 되돌아 가지 않기를 원하기 때문입니다.

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입니다.