主页 / 问题 / 1259904
Accepted
Armen
Asked:2022-03-24 02:49:04 +0000 UTC2022-03-24 02:49:04 +0000 UTC

如何控制复选框

  • 772

当然，结果我得到了一个被点击的复选框的名称数组，但是我不明白如何根据点击的原理来控制它们 -> 调度 -> 用点击的复选框重绘

//компонент
export const Icons = () => {
const dispatch = useDispatch()
const checkedArray = useSelector(state => state.iconForm)
console.log(checkedArray);
const changeHandler = (e) => {
    if(!e.target.checked){
        dispatch({type:UNCHECK,payload:e.target.name})
        return
    }
    dispatch({type:CHECK,payload:e.target.name})
}

const submitHandler = (e) => {
    e.preventDefault()
}
return (
    <div className={styles.iconsForm}>
        <form>
            <label className="label" onChange={changeHandler}>
                <input name="111" type="checkbox"/>
            </label>
            <label className="label" onChange={changeHandler}>
                <input name="222" type="checkbox"/>
            </label>
            <label className="label" onChange={changeHandler}>
                <input name="333" type="checkbox"/>
            </label>
            <button onClick={submitHandler}>abcd</button>
        </form>
    </div>
)
}



//редюсер
const initialState = {
activeIcons:[],
}
export const iconFormReducer = (state = initialState, action) => {
switch(action.type){
    case CHECK:
        return {
            ...state,
            activeIcons:[...state.activeIcons,action.payload]
        }
    case UNCHECK:
        return {
            ...state,
            activeIcons:state.activeIcons.filter(e => e != action.payload)
        }
    default:
        return state
}
}

export const CHECK = 'APP/CHECK'
export const UNCHECK = 'APP/UNCHECK'
reactjs

1 个回答

  1. Best Answer

    每次复选框更改时，不必将结果保存在 redux 中。

    存储在本地状态，并在提交表单时，将它们添加到 redux 并在必要时提交。

    其次onChange，最好是挂在自己身上checkbox，而不是挂在上面label。

    export default function App() {
  const [state, setState] = useState({
    first: false,
    second: false,
    third: false
  });

  const handleCheckbox = (e) => {
    const { name, checked } = e.target;
    setState((prev) => {
      return {
        ...prev,
        [name]: checked
      };
    });
  };
  const submitHandler = (e) => {
    e.preventDefault();
    console.log("тут надо добавлять в redux", state);
  };
  return (
    <div className="App">
      <form>
        <label className="label">
          <input
            name="first"
            onChange={handleCheckbox}
            checked={state.first || ""}
            type="checkbox"
          />
        </label>
        <label className="label">
          <input
            name="second"
            onChange={handleCheckbox}
            checked={state.second || ""}
            type="checkbox"
          />
        </label>
        <label className="label">
          <input
            name="third"
            onChange={handleCheckbox}
            checked={state.third || ""}
            type="checkbox"
          />
        </label>
        <button onClick={submitHandler}>Submit</button>
      </form>
    </div>
  );
}

    代码沙盒

    • 2

相关问题