使用 redux 表单提交表单

Question

我有自己的操作，我想用它来提交一个 redux 表单

actions/spell.js:

export const updateSpell = (spell) => ({
    [RSAA]: {
        endpoint: '/api/spell/' + spell.id,
        method: 'PUT',
        body: JSON.stringify(spell),
        headers: withAuth({ 'Content-Type': 'application/json' }),
        types: [
            UPDATE_SPELL, UPDATE_SPELL_SUCCESS, UPDATE_SPELL_FAILURE
        ]
    }
});

但我很难弄清楚如何设置提交功能。我尝试了各种我在网上搜索过的解决方案，但它们给出了各种错误。

默认操作不是我希望表单具有的行为。并且尝试替换我自己的提交函数，它要么抛出与应该如何设置 redux-form 相关的错误，要么我无法弄清楚如何传递表单值。

关于如何为 redux 表单设置自定义提交功能的任何指导？

class FormSpellEdit extends Component {
    constructor(props) {
        super(props);

        this.state = {
            id: 0,
            owner: 0,
            Name: 'NoName',
            School: 'NoSchool',
        };
    }

    componentDidMount() {
        this.props.initialize(this.state)
    }

    render() {
        const { classes, submit, handleSubmit, pristine, reset, submitting } = this.props;

        const renderTextField = ({
                 input,
                 label,
                 meta: { touched, error },
                 ...custom
             }) => (
            <TextField
                hintText={label}
                floatingLabelText={label}
                errorText={touched && error}
                {...input}
                {...custom}
            />
        );

        return (
            <form
                onSubmit={handleSubmit}
            >

                <Button
                    variant="fab"
                    color="primary"
                    aria-label="Save"
                    disabled={pristine || submitting}
                    onClick={submit}
                >
                    <SaveIcon/>
                </Button>


                        <Grid fluid>
                            <Row>
                                <Col xs={12} >
                                    <CardContent className={classes.spellCardContent}>
                                        <Typography>Spell Name</Typography>
                                        <Divider />
                                        <Field
                                            fullWidth
                                            name="Name"
                                            component={renderTextField}
                                            label="Spell Name"
                                            value={this.state.Name}
                                        />
                                    </CardContent>
                                </Col>
                                <Col xs={12}>
                                    <Divider />
                                </Col>
                                <Col xs={6} lg={1}>
                                    <CardContent className={classes.spellCardContent}>
                                        <Typography>School</Typography>
                                        <Divider />
                                        <Field
                                            fullWidth
                                            name="School"
                                            component={renderTextField}
                                            label="Spell School"
                                        />
                                    </CardContent>
                                </Col>
                            </Row>
                        </Grid>
        );
    }
}


const mapStateToProps = (state, props) => {
    return {
        errors: authErrors(state),
        user: state.auth.access,
        user_id: userId(state),
        page: {
            spell: state.spell
        },
        initialValues: state.spell,
    }
};

const mapDispatchToProps = (dispatch) => {
    return {
        handleSubmit: (values) => dispatch(updateSpell(values)),
    }
};


export default compose(
    connect(
        mapStateToProps,
        mapDispatchToProps,
    ),
    reduxForm({
        form: 'FormSpellEdit',
        enableReinitialize: true
    }),
    withStyles(styles, {
            withTheme: true
        },
    ))(FormSpellEdit);

Answer 1

您可以调用自己的处理程序来提交表单，如下所示。 设句柄方法为

handleMethod(data) {
          ...//Submit handling
          console.log(data)
      }

   render() {
    const { classes, submit, handleSubmit, pristine, reset, submitting } = this.props;
      ....// your other codes
        return (
          <form onSubmit={handleSubmit(this.handleMethod)}>
           .... // your other codes
           )