Question

我有这个数组：

const CheckboxItems = () => [
  {
    value: 'itemsCancelled',
    id: 'checkBoxItemsCancelled',
    labelText: 'Items Cancelled',
  },
  {
    value: 'requestDate',
    id: 'checkboxRequestDate',
    labelText: 'Request Date',
  },
];

export default CheckboxItems;

我需要根据是否选中复选框来将值设置为另一个组件。

默认情况下，这些复选框将被选中。

这是我正在使用的组件：

       {CheckboxItems().map(item => (
          <ToolbarOption key={item.id}>
            <Checkbox
              defaultChecked
              id={item.id}
              labelText={item.labelText}
              value={item.value}
              onChange={onChange}
              columnsFilterHandler={columnsFilter}
            />
          </ToolbarOption>
        ))}

这是同一组件上的调度程序：

connect(
    ({ cancellations }) => ({
      columnsSelected: cancellations.columnsSelected,
    }),
    dispatch => ({
      columnsFilterHandler: columns => {
        dispatch(columnsFilter(columns));
      },
    }),
  ),

这是动作：

const columnsFilter = columns => ({
  type: ActionTypes.COLUMNS_FILTER,
  payload: columns,
});

还有减速器：

[ActionTypes.COLUMNS_FILTER](state, action) {
    return {
      ...state,
      columnsSelected: action.payload,
    };
  },

但是我需要分别处理这些复选框的状态，我该怎么办？

Answer 1

首先，我建议您使用redux中使用的最新的sintax，并且仅使每个人都能使用mapStateToProps和mapDispatchToProps可以理解并帮助您。

我认为，如果您要在应用程序中共享这两个复选框，则只需在id中存储ID和值（是否选中）。最小必要状态。

在initialState中，您可以使用 checkboxes:[{ checked: true, id: 'checkBoxItemsCancelled' }, { checked:true, id: 'checkboxRequestDate' }]

操作可能类似于changeChecked接收到的ID，例如：

const changeChecked = id => ({ type: CHANGE_CHECKED_CHECKBOX, payload: {id}, });

和减速器类似： case CHANGE_CHECKED_CHECKBOX: return state.checkboxes.map(checkbox => { if (!checkbox.id === action.payload.id){ return checkbox } return {...checkbox, checked: !checkbox.checked} })

最后，您可以在mapStateToProps中访问这些值，并在复选框的 onChange 函数中，启动具有ID的操作 changeChecked 。

如果您需要帮助，我希望能为您提供帮助：）

如何使用Redux从一系列复选框中获取值以与其他一些组件共享？

1 个答案: