Отправка формы с сокращенной формой
У меня есть собственное действие, которое я хочу использовать для отправки формы сокращения
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);
Ответы 1
Вы можете вызвать собственный обработчик для отправки формы следующим образом. Пусть метод handle будет
handleMethod(data) {
...//Submit handling
console.info(data)
}
render() {
const { classes, submit, handleSubmit, pristine, reset, submitting } = this.props;
....// your other codes
return (
<form onSubmit = {handleSubmit(this.handleMethod)}>
.... // your other codes
)
вы можете вызвать метод действия как <form onSubmit = {handleSubmit (this.props.handleSubmit)}>
Хорошо, и просто для лучших практик, я заставил его работать только тогда, когда у меня был onSubmit в теге формы, но для кнопки сохранения у меня был onClick = {handleSubmit(this.props.sendSubmit)}. Что я должен добавить в onClick, чтобы он отправил форму вместо вызова отправки с помощью кнопки? Я попробовал просто сделать onClick = {submit}, но это не сработало.
вы можете включить такую кнопку, как <button type = "submit"> Save </button>, которая отправит форму
Но что, если мне не нужно делать ничего лишнего, чтобы справиться с этим. Мне просто нужно отправить его в настраиваемое действие при отправке (в настоящее время это просто называется handleSubmit в matchDispatchToProps, но я могу его изменить)