根據選定的下拉項-redux-react過濾數組

Question

我有一個下拉列表。 基於所選的下拉項，我必須顯示貨幣。 這里是數據結構： [{mruCode：“ 1700”，國家：“ US”，countryText：“美國”，部門：“ WORLDWIDE_INDUSTRIAL”，貨幣：“ USD”} ....] 。 我將此數據映射到我的選擇項。 現在，基於所選項目（例如：部門：“ WorldWIDE_Industrial”），我必須在標簽中顯示貨幣（例如“ USD”）。 如果下拉值更改，則onChange事件將觸發並顯示相應的貨幣。

我已經為此創建了動作和減速器，並根據Change動作篩選了列表。 我無法理解如何處理更改事件。 請幫忙。

組件代碼：

class LocationList extends React.Component{
    constructor(props){
        super(props);
        this.state={
            isLoading:false,
        };

        this.handleChange = this.handleChange.bind(this);
    }

    componentDidMount() {
      this.props.loadData();
    }

    handleChange(mruCode){
      this.props.currencyLists(mruCode);
    }

    render(){
      const{location}=this.props;
      console.log(this.props.currList);
      const _labels = store.getLabels();
        return(<div>
            <span className="btnElement_spacing">You are viewing pricing for </span> 
  //here is the problem start i assume
             <select id="toggleLocationName">
                                  {location.map((item,index) =>
                   <option  key={index} onChange={()=>this.handleChange(item.mruCode)}> value={index}>{_labels[item.division]}</option> 
                    )}
          </select> 
          <span className="btnElement_spacing"> in </span>
                  {this.props.currList.map((item,index)=><label id="toggle-currency" key ={index}>{item.currency}</label>)}
            </div>
             );
    }
}

const mapStateToProps = state => {
    return {
      location: state.locationRed.location,
      currList: state.locationRed.currList
    }
  }

  const mapDispatchToProps = dispatch => {
    return {
      loadData:()=>{dispatch(loadData())},
      currencyLists:(mruCode)=>{dispatch(currencyLists(mruCode))}
      }
    }


  export default connect(mapStateToProps,mapDispatchToProps)(LocationList);

動作代碼：

export const currencyLists = mruCode =>({
  type: CURRENCY_LIST,
  payload: mruCode
});

減速器代碼：

case 'CURRENCY_LIST':
        let newState = Object.assign({}, state)
        let newCurrList = newState.location.filter((el) => el.mruCode === action.mruCode)
        return Object.assign({}, newState, {
            currList: newCurrList
        });

我試圖基於基於mruCode的操作ID為onChange過濾掉主列表，並將結果保存到currList中。 映射以顯示貨幣。 但是我失敗了。 currList最初顯示為空。 onChange未觸發。 如何采取行動以顯示貨幣

Answer 1

應該在選擇標簽上（而不是在選項標簽上）調用Onchange。 下面的代碼應該工作。

<select id="toggleLocationName" onChange={this.handleChange}>
  {location.map((item, index) =>
    <option key={index} value={item.mruCode}>{_labels[item.division]}</option>
  )}
</select>

handleChange(e){
  this.props.currencyLists(e.target.value);
}