首页 > 解决方案 > 从输入表单传递数据以更改 redux 状态

问题描述

请帮帮我!如何将 modalAction.js 的值传递给 projectAction.js 以更改状态?

/src/view/projectList.js

const ProjectList = () => {

const dispatch = useDispatch()
const project = useSelector(state => state.project)
const modal = useSelector(state => state.modal)

return (
<div>
    <Button 
        label="Add Project" 
        onClick={()=> handleOpenProjectModal()}
        primary={true}
    />  
    <Modal 
            title={modal.title}
            modalClass={modal.status ? 'top-10 opacity-100' : '-top-20 opacity-0 pointer-events-none'}
            bgClass={modal.status ? 'opacity-75 pointer-events-auto' : 'opacity-0 pointer-events-none'}
            content={
                <div>
                    {modal.content}
                </div>
            }
        />
</div>

/src/store/action/modalAction.js

export const openProjectModal = () => dispatch => {
    dispatch({
        type: ADD_PROJECT_MODAL,
        title: 'Create Project',
        content: 
            <div>
                <Input 
                    label="Title"
                    onChange={() => dispatch(handleProjectPayload())}
                    name="title"
                />
            </div>

/src/store/action/projectAction.js

export const handleProjectPayload = (value) => async dispatch => {
    
    dispatch({
        type    : CHANGE_PROJECT_PAYLOAD,
        payload : value
    })

}

标签: javascriptreactjsformsreduxreact-redux

解决方案


您需要从 OnChange 处理程序中的输入标记传递事件值。onChange={(e) => dispatch(handleProjectPayload(e.target.value))}. 这可能有效


推荐阅读