Question

我的React应用程序中有以下reducer：

const initialState = {
    genderRadio : false,
    ageRadio : false
}

const reducer = (  state = initialState , action ) => {

    switch(action.type) {
        case "VALI_RADIO_INP":
            console.log(action.payload.target);
            return state        
    }
    return state;
}

export default reducer;

action.payload基本上是传递给reducer的事件对象，就像我的组件一样：

validateRadioInput : (e) => dispatch({ type: 'VALI_RADIO_INP' , payload : e })

我想在reducer中做的是检查输入元素是否已被检查并更新状态。如何使用event对象检查是否选中了元素？

注意:: -

在整合redux之前，我正在检查是否选中了复选框，调用了一个位于我的组件内部的meathod，如下所示：

Array.from(document.getElementsByName('customer_gender')).some( (elem , idx) => {  return elem.checked  })

但是当然我不能再使用它了，关于如何使用事件对象验证我的reducer中的复选框的任何建议？

Answer 1

首先将属性name设置为您的复选框元素，如下所示：

<input type="checkbox" name="genderRadio"/>

或：

<input type="checkbox" name="ageRadio"/>

根据checkbox元素的属性name修改设置正确状态的代码。示例：

const reducer = (  state = initialState , action ) => {

switch(action.type) {
    case "VALI_RADIO_INP":
        console.log(action.payload.target);
        return { ...state, [payload.target.name]: payload.target.checked };        
 }
  return state;
}

export default reducer;

Answer 2

如何使用事件对象检查是否选中了元素？

你不应该这样做。如果可以帮助，您的Redux Reducer不应该与DOM耦合。但是，您可以从事件的目标遍历DOM，如果您使用的是React，则根本不应该依赖于DOM。

一种方法是让组件拥有视图的数据表示。这可能是你的React组件的状态。或者，如果你没有像这样使用React，你可以从DOM中获取它：

validateRadioInput: (e) => {
  const checkedArr = Array.from(document.getElementsByName('customer_gender'))
      .map(elem => elem.checked);

  return dispatch({
    type: 'VALI_RADIO_INP',
    payload: checkedArr,
  });
}

// reducer
const reducer = (  state = initialState , action ) => {

    switch(action.type) {
        case "VALI_RADIO_INP":
            const valid = action.payload.some(checked => checked);
            return { ...state, valid };        
    }
    return state;
}

但最终，我不同意在Redux中执行表单验证逻辑的概念 - 只需在组件中执行它，然后在Redux有效的情况下将一些操作分派给Redux。 Redux不应该在你的应用程序中处理每个细节状态;只是声明以可能复杂的方式影响多个组件。

另外，请注意您可能正在尝试修复JS中的HTML问题，因为无论如何您一次只能检查一个单选按钮，并且您可以只使HTML具有必填字段。见HTML5: How to use the "required" attribute with a "radio" input field

如何使用传递给reducer的事件对象验证reducer内的单选按钮？

2 个答案: