Я искал много способов сделать это и даже сделал HOC и заменил его на компонент класса. Я пробовал несколько известных мне способов, например, вызов handleSubmit с опорой. Я использую инструменты redux, и я привык видеть что-то вроде submit_failed или submit_success, но я этого не вижу и не знаю, почему функция onSubmit не срабатывает. Вот образец одного из способов, которыми я это сделал, в котором я следую простому примеру в документации в форме сокращения:
import React from 'react';
import { Field, reduxForm } from 'redux-form';
import { Form, Button, Grid } from 'semantic-ui-react';
import { Link } from 'react-router-dom';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {signup} from '../../actions/user-actions';
import { required, minValue7, email, renderField } from '../helpers/validations';
let SignupForm = (props) => {
const { handleSubmit } = props.signup;
return (
<Grid centered columns={2}>
<Grid.Column className="home">
<Form className="forms" onSubmit={ handleSubmit }>
<Form.Field inline>
<Field
name="username"
component={renderField}
type="text"
placeholder="Username"
label="Username"
validate={[required]}
/>
</Form.Field>
<Form.Field inline>
<Field
name="email"
component={renderField}
type="email"
placeholder="Email"
label="Email"
validate={[required, email]}
/>
</Form.Field>
<Form.Field inline>
<Field
name="password"
component={renderField}
type="password"
placeholder="Password"
label="Password"
validate={[required, minValue7]}
/>
</Form.Field>
<Link to={'/signup2'}>
<Button type="submit">Save</Button>
</Link>
</Form>
</Grid.Column>
</Grid>
)
}
SignupForm = reduxForm({
form: 'form1'
})(SignupForm)
const mapStateToProps = (state, ownProps) => {
return {
userSignup: state.userSignup
}
}
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({signup}, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps)(SignupForm)
Также я пробовал это там, где я делаю const {handleSubmit} = props
, а затем меняю `` onSubmit = {handleSubmit (this.props.signup)}
Link
сработал одновременно с срабатыванием обработчика событий. Я не уверен, что на самом деле произойдет, но не удивлюсь, если произойдет перенаправление, которое затем предотвратит выполнение обработчика. Плевать здесь, но создать компонент для каждого шага мастера -WizardStep1
,WizardStep2
и т.д ... Вместо использованияLink
ваш обработчик (ы) событий мог бы принимать данные из формы и на основе этого определять, какой шаг должен быть текущим шагом и сохраните это в состоянии. Затем на вашей странице вашrender()
метод может проверить, какой шаг является текущим, и обработать его соответствующим образом. - person Mister Epic   schedule 22.08.2017