我有自己的动作,可以用来提交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
]
}
});
但是我很难弄清楚如何设置提交功能。我尝试了在线搜索过的各种解决方案,但是它们会给出各种错误。
默认操作不是我希望表单具有的行为。尝试替换我自己的Submit函数,它要么引发与应如何设置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);
答案 0 :(得分:1)
您可以如下调用自己的处理程序来提交表单。 让handle方法成为
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
)