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且具有onChange动作ID的主列表进行过滤，并将结果保存到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);
}

Answer 2

让我们假设一个过滤性别和人的组件，为简单起见，我们将只有2个性别和两个人：

const genders = ['male', 'female']
const people = [{gender: 'male', name:'John'}, {gender: 'female', name:'Brenda'}]

现在，我们要做的第一件事是将所有性别都放在Select组件中，因为人员的选择取决于所选择的性别。

const MyFilterComponent = ({genders, people}) =>{
    return(
        <>
            <select>
                {genders.map(x => (<option key={x}>{x}</option>))}
            </select>
       </>
    )
}

现在，我假设您已经知道如何使用钩子或状态来选择选项，并仅构建搜索逻辑，从本质上讲就是从人们中筛选出所有不包含所选性别的记录。因此，呈现人物的过滤器功能将如下所示：

const renderItems = people.filter(x => x.gender === selectedGender).map(x => <option key={x.name}>{x.name}</option>

现在people的数组已根据所选性别进行了动态过滤。

根据选定的下拉项-redux-react过滤数组

2 个答案: