从输入表单传递数据以更改 redux 状态

时间:2021-06-01 06:16:41

标签: javascript reactjs forms redux react-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
    })

}

1 个答案:

答案 0 :(得分:0)

您需要在 OnChange 处理程序中传递来自 input 标签的事件值。 onChange={(e) => dispatch(handleProjectPayload(e.target.value))}。这可能有效