嵌套表单提交也会提交父表单
import React, { PureComponent } from 'react'; import PropTypes from 'prop-types';
import Dialog, { DialogActions, DialogContent, DialogTitle } from 'material-ui/Dialog'; import Button from 'material-ui/Button'; import { connect } from 'react-redux'; import { Form, Field, propTypes, reduxForm } from 'redux-form'; import { withStyles } from 'material-ui/styles/index'; import { TextField } from 'redux-form-material-ui'; import Validator from 'validatorjs'; import styles from '../../Process/EditorTab-styles';
class UserDataDialog extends PureComponent { static propTypes = { ...propTypes, callback: PropTypes.func.isRequired, edit: PropTypes.bool, existing: PropTypes.array.isRequired, open: PropTypes.bool };
static defaultProps = { edit: false, open: false };
onSubmit = values => { this.props.callback(true, values); };
onCancel = () => { this.props.callback(false); };
render() {
const { edit, handleSubmit, invalid, open } = this.props;
const title = ${edit ? 'Update' : 'Add'} User Data;
return (
<Dialog fullWidth open={open}>
<Form onSubmit={handleSubmit(this.onSubmit)}>
<DialogTitle>{title}</DialogTitle>
<DialogContent>
<Field name="name" component={TextField} label="Name" autoFocus margin="dense" fullWidth disabled={edit} />
<Field name="value" component={TextField} label="Value" multiline rows="5" margin="dense" fullWidth />
</DialogContent>
<DialogActions>
<Button onClick={this.onCancel} color="primary">
Cancel
</Button>
<Button type="submit" color="primary" disabled={invalid}>
{edit ? 'Update' : 'Add'}
</Button>
</DialogActions>
</Form>
</Dialog>
);
} }
const validate = (values, props) => {
const rules = {
name: required${props.edit ? `` : |not_in:${props.existing}},
value: 'required'
};
const validator = new Validator(values, rules);
validator.check();
return validator.errors.all(); };
const mapStateToProps = (state, { data }) => { return { initialValues: data }; };
export default
内容来源: redux-form/redux-form