Question

我在我的应用程序中使用redux表单，尝试在Field Validate Level上进行验证时遇到问题。我尝试在QVariant val中使用同步验证功能。

以前，所有方法都能正常工作，我在按钮单击时使用默认的reduxForm()而不是传递submit，因为我需要将一些道具传递给onSubmit，因此我决定直接从mapDispatchToProps使用。现在保存，验证不会将错误传递给字段

onSubmit

renderTextField

export const validate = ({name})=> {
    let errors = {}

    if (!name)
        errors.name = <FormattedMessage id={'common.error.empty'} />

    return errors
}

const returnToList = ({history, filter}) => history.push({pathname: '/setup/rooms', state: filter})

export class AddOrEditRoom extends Component {
    render = () => {
        let {intl, submit, onSubmit, handleSubmit,  filter, currentRoomValues} = this.props
        debugger

        const actions =
            <Fragment>
                <Button
                    variant='contained'
                    name='cancel'
                    onClick={() => returnToList(this.props)}
                >
                    <FormattedMessage id='common.cancel' />
                </Button>
                <Button
                    name='save'
                    onClick={() => onSubmit({currentRoomValues, filter})}
                    /*onClick={submit} - previous implementation, but I need pass props `filter` to onSumbit*/
                >
                    <FormattedMessage id='common.save' />
                </Button>
            </Fragment>

        return (
            <Page title={<FormattedMessage id='rooms.roomInfo' />} actions={actions} footer={actions}>
                {isLoadingInProgress && <LinearProgress variant='indeterminate' />}
                <form onSubmit={handleSubmit}>
                                        <Field
                                            required
                                            name='name'
                                            label={<FormattedMessage id='name' />}
                                            component={renderTextField}
                                        />
                </form>
            </Page>
        )
    }
}

export const mapStateToProps = (state, {match: {params: {roomId}}}) => {
    let initialValues = roomId && state.entities.rooms[roomId]
    const form = `room-${roomId}`
    const selector = formValueSelector(form)

    return {
        roomId,
        initialValues,
        form,
        filter: filterSelector(state.rooms),
        currentRoomValues: {...initialValues, name: selector(state, 'name')},
    }}

export const mapDispatchToProps = (dispatch, {match: {params: {roomId}}, history}) => ({
    init: () => dispatch(RoomActions.get(roomId)),
    onSubmit: async ({currentRoomValues, filter}) => {
        const {success, response} = await dispatch(RoomActions.createOrUpdate({...currentRoomValues, ...getTrimmedStringFields(currentRoomValues)}))

        if (!success) {
            const statusCode = response?.result?.statusCode
            const error = {}

            if (statusCode === ValidationStatus.DuplicateName)
                error.name = <FormattedMessage id='rooms.duplicateName' />
            else
                error._error = <FormattedMessage id='rooms.failedMessageWithStatusCode' values={{statusCode}} />

            throw new SubmissionError(error)
        }

        returnToList({history, filter})
    },
})

export default compose(
    connect(mapStateToProps, mapDispatchToProps),
    reduxForm({validate, enableReinitialize: true, keepDirtyOnReinitialize: true}),
    initializable,
)(AddOrEditRoom)

Answer 1

所以我发现了一个问题，我只需要将我自己的函数传递给handleSubmit到按钮，它将运行同步和异步验证，并且如果该表单有效，它将调用this.props .onSubmit（data）以及表单数据的内容。 onClick={handleSubmit(room => onSubmit({currentRoomValues, filter})}

Redux表单验证字段无法正常工作

1 个答案: