как контролировать checkbox-ы

Question

я конечно получаю по итогу массив имен кликнутых чекбохов но никак не магу понят как их контролировать по принципу кликнул -> диспатч -> перерисовка с кликнутым чекбохом

//компонент
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'

Answer 1

Не надо результат сохранять в redux при каждом изменении checkbox-ов.

Храните в локальном стейте и при отправке формы добавьте их в 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>
  );
}

Codesandbox

БЛОГ НА HUSL

как контролировать checkbox-ы

Ответы (1 шт):