当然,结果我得到了一个被点击的复选框的名称数组,但是我不明白如何根据点击的原理来控制它们 -> 调度 -> 用点击的复选框重绘
//компонент
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'
每次复选框更改时,不必将结果保存在 redux 中。
存储在本地状态,并在提交表单时,将它们添加到 redux 并在必要时提交。
其次
onChange
,最好是挂在自己身上checkbox
,而不是挂在上面label
。代码沙盒