首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在UI中更改reducer上复选框数组的状态时,对其状态进行更改

在UI中更改reducer上复选框数组的状态时,对其状态进行更改
EN

Stack Overflow用户
提问于 2018-12-11 05:40:40
回答 2查看 869关注 0票数 0

我在React上有这样的东西:

const CheckboxItems = (t) => [ // that t is just a global prop
  {
    checked: true,
    value: 'itemsCancelled',
    id: 'checkBoxItemsCancelled',
    labelText: t('cancellations.checkBoxItemsCancelled'),
  },
  {
    checked: true,
    value: 'requestDate',
    id: 'checkboxRequestDate',
    labelText: t('cancellations.checkboxRequestDate'),
  },
  {
    checked: true,
    value: 'status',
    id: 'checkboxStatus',
    labelText: t('cancellations.checkboxStatus'),
  },
  {
    checked: true,
    value: 'requestedBy',
    id: 'checkboxRequestedBy',
    labelText: t('cancellations.checkboxRequestedBy'),
  },
];

class TableToolbarComp extends React.Component {
  state = {
    items: CheckboxItems(),
  };

  onChange = (value, id, event) => {
    const { columnsFilterHandler } = this.props;
    this.setState(({ items }) => {
      const item = items.slice().find(i => i.id === id);
      if (item) {
        item.checked = !item.checked;
        columnsFilterHandler(id, item.value, item.checked);
        return { items };
      }
    });
  };

  render() {
    const { items } = this.state;

    return(
      <>
             {items.map(item => (
                <ToolbarOption key={item.id}>
                  <Checkbox
                    id={item.id}
                    labelText={item.labelText}
                    value={item.value}
                    checked={item.checked}
                    onChange={this.onChange}
                  />
                </ToolbarOption>
              ))}
      </>
    )
  }

export default compose(
  connect(
    ({ cancellations }) => ({
      columnId: cancellations.columnId,
      columnValue: cancellations.columnValue,
      isChecked: cancellations.isChecked,
    }),
    dispatch => ({
      columnsFilterHandler: (columnId, columnValue, isChecked) => {
        dispatch(columnsFilterAction(columnId, columnValue, isChecked));
      },
    }),
  ),
)(translate()(TableToolbarComp));

它工作得很好,它可以分派我以后需要用到的数据。

但是我在Redux部分弄得一团糟,它一次改变了所有复选框的状态,而不是像它应该的那样单独改变。因此,一旦我取消选中其中一个复选框,其他3个复选框也会得到checked: false。我在UI上看不到checked: false的这一变化,只是在浏览器的Redux控制台上看到了它。

这就是我在减速箱里的东西

const initialState = {
  checkboxes: [
    {
      checked: true,
      value: 'itemsCancelled',
      id: 'checkBoxItemsCancelled',
    },
    {
      checked: true,
      value: 'requestDate',
      id: 'checkboxRequestDate',
    },
    {
      checked: true,
      value: 'status',
      id: 'checkboxStatus',
    },
    {
      checked: true,
      value: 'requestedBy',
      id: 'checkboxRequestedBy',
    },
  ],
}

[ActionTypes.COLUMNS_FILTER](state, action) {
    return initialState.checkboxes.map(checkbox => {
      if (!checkbox.id === action.payload.id) {
        return checkbox;
      }
      return {
        ...checkbox,
        checked: action.payload.isChecked,
      };
    });
 }

操作:

const columnsFilterAction = (columnId, columnValue, isChecked) => ({
  type: ActionTypes.COLUMNS_FILTER,
  payload: { columnId, columnValue, isChecked },
});

因此,我需要知道的是,当Redux在React上工作时,我需要做什么来管理Redux上这些复选框的状态。因为我所看到的是,当我切换复选框时,它们都会达到相同的状态。

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53714069

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档