#3701·redux-form

嵌套表单提交也会提交父表单

作者: MikeSuiter创建于 2017年12月18日更新于 2025年1月29日

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