Question

我正在尝试进行多项选择并突出显示它们。因此，如果我正在显示5个按钮，并且如果用户点击某个按钮，它将被突出显示，如果用户再次点击它，那么它将变为正常。

我正在使用redux存储我的按钮的状态。这些按钮是根据它们的数量动态创建的。

Redcuer

 CurrentReducer(state = {court:{}}, action){
    switch (action.type){
    case 'COURT_SELECTED':{
          return {...state,
            court: action.payload
          }
        }}

onClick

上的调度操作

this.props.dispatch(actions.selected({type:'COURT_S', payload: id}))

我曾想过通过将id作为数组存储或在对象中存储id为true或false的id来存储id。任何人都可以给我一个简单易用的解决方案

Answer 1

您可以这样做：

<强> reduser

<ul>
  <li>
    <div><strong>Dwarf</strong></div>
    <img src="C:\Users\690177\Desktop\TEST WEB\images\troll.jpg">
    <p>The dwarf figurine is short, stocky and well armored, carrying a battle axe. He is very good in health, but lacks the attack strength of the barbarian and has no magical abilities. The dwarf also has the unique ability of being able to disarm traps without special equipment. His starting weapon is a short sword.</p>
  </li>
  <li>
    <div><strong>Elf</strong></div>
    <p>The elf figurine is tall and slender, armed with a short one-handed sword. He is equal in attack strength to the dwarf, but is less physically robust. He is also able to use one element's spell—air, earth, fire, or water magic, and can resist magical attack more effectively. His starting weapon is a short sword.</p>
  </li>
</ul>

<强>动作

const selectedCourts = (state = {}, action) => {
  switch (action.type) {
    case 'COURT_TOGGLE': {
      return {
        ...state,
        [action.id]: !state[action.id]
      };
    }
  }
  return state;
};

所以你会有这样的状态：

dispatch({type: 'COURT_TOGGLE', id});

我建议你使用combineReducers将reducer拆分成更小的部分，这样每个subreducer都会处理你状态的一个简单部分，比如一个数组或一个级别的对象或布尔变量。

<强> CurrentReducer.js

selectedCourts: {
    1: true,
    2: false,
    3: false,
    ...
  }

如何使用redux突出显示多个选择？

1 个答案: