Question

我正在使用react-boilerplate + material-ui + redux-form。我已经安装了不可变的减速器。

我的问题是从表单获取提交的值；我在表单上有一个onSubmit={}操作，但是在Material-UI按钮上使用type="submit"会刷新整个页面，并且看起来很错误，所以我只需要一些正确方法的帮助就可以使用表单的值。

这是完整的代码示例，请随时提出似乎有些错误的内容。

*在表单错误消息显示方面也有一些困难，但这可能有很大不同，但是我认为Textfield中的错误仅接受布尔值。但我希望firstName和email字段为必填字段，并且将电子邮件小写。 *

import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form/immutable';

// Core
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';
import TextField from '@material-ui/core/TextField';

const validate = values => {
  const errors = {};

  if (!values.get('email')) {
    errors.email = 'Required';
  } else if (
    !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.get('email'))
  ) {
    errors.email = 'Invalid email address';
  }

  return errors;
};

const renderTextField = ({
  input,
  label,
  meta: { touched, error },
  ...custom
}) => (
  <TextField
    placeholder={label}
    helperText={label}
    error={touched && error}
    {...input}
    {...custom}
  />
);

class FormContactAdd extends React.Component {
  handleSubmit = values => {
    console.log('test');
    console.log(values);
  };

  render() {
    const { pristine, submitting } = this.props;

    return (
      <form onSubmit={this.handleSubmit}>
        <Grid container spacing={24}>
          <Grid item xs={12} sm={4}>
            <Field
              fullWidth
              name="firstName"
              component={renderTextField}
              label="First Name"
            />
          </Grid>
          <Grid item xs={12} sm={4}>
            <Field
              fullWidth
              name="lastName"
              component={renderTextField}
              label="Last Name"
            />
          </Grid>

          <Grid item xs={12} sm={6}>
            <Field
              fullWidth
              name="email"
              component={renderTextField}
              label="Email"
            />
          </Grid>


          <Grid item xs={12}>
            <Button
              color="primary"
              size="large"
              variant="contained"
              disabled={pristine || submitting}
            >
              Add Contact
            </Button>
          </Grid>
        </Grid>
      </form>
    );
  }
}

FormContactAdd.propTypes = {
  classes: PropTypes.object,
  handleSubmit: PropTypes.func,
  pristine: PropTypes.bool,
  submitting: PropTypes.bool,
};

export default reduxForm({
  form: 'formContactAdd',
  validate,
})(connect()(withStyles(styles)(FormContactAdd)));

Answer 1

我认为您做错了方法。在表单上您直接调用了handleSubmit函数，这在reduxForm中不合适。您有两种方法。

1。您可以照常进行操作，但是在handleSubmit函数内部，您必须接受事件参数并防止重新加载页面。

handleSubmit = e =>{
 e.preventDefault();
//your logic here
}

2。您可以使用handleSubmit提供的reduxForm函数作为道具，而可以在函数内部将函数作为回调传递。

 <form onSubmit={this.porps.handleSubmit(this.handleSubmit)}>

您的按钮应该是

 <button type="submit">

您的表单和按钮应该是这样

render() {
    const { pristine, submitting,handleSubmit } = this.props;

    return (
      <form onSubmit={handleSubmit(this.handelSubmit)}>
        <Grid container spacing={24}>
          <Grid item xs={12} sm={4}>
            <Field
              fullWidth
              name="firstName"
              component={renderTextField}
              label="First Name"
            />
          </Grid>
          <Grid item xs={12} sm={4}>
            <Field
              fullWidth
              name="lastName"
              component={renderTextField}
              label="Last Name"
            />
          </Grid>

          <Grid item xs={12} sm={6}>
            <Field
              fullWidth
              name="email"
              component={renderTextField}
              label="Email"
            />
          </Grid>


          <Grid item xs={12}>
            <Button
              type='submit'
              color="primary"
              size="large"
              variant="contained"
              disabled={pristine || submitting}
            >
              Add Contact
            </Button>
          </Grid>
        </Grid>
      </form>
    );
  }

如何使用material-ui提交redux表格

1 个答案: