无法执行' insertBefore'在' Node'?

时间:2017-06-19 12:53:59

标签: reactjs react-native react-redux

我在提交按钮控件上收到此错误。 我不明白为什么我会收到这个错误,我的错误在哪里。我想在handleSubmit上进行performe验证。 错误:无法执行' insertBefore' on'节点':插入新节点之前的节点不是该节点的子节点。

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


// md-input uk-form-width-large

const textClass = (textSize, status) => {
  return classNames({
    'md-input': true,
    [`uk-form-width-${textSize}`]: textSize !== undefined && textSize != null
    && ['large', 'small', 'medium', 'mini'].indexOf(textSize.toLowerCase()) >= 0,
    [`md-input-${status}`]: status !== undefined && status != null
    && ['default', 'success', 'danger'].indexOf(status.toLowerCase()) >= 0,
  });
};

const validate = values => {
  const errors = {}
  if (!values.firstName) {
    errors.firstName = 'Required'
  }
  if (!values.lastName) {
    errors.lastName = 'Required'
  }
  if (!values.email) {
    errors.email = 'Required'
  }
  if (!values.phoneNo) {
    errors.phoneNo = 'Required'
  }
  return errors
}
/*const textClass = (textSize,status) => {
  console.log("TextClass",textSize,status);
  classNames({
    'md-input': true,
    [`uk-form-width-${textSize}`]: textSize !== undefined && textSize != null,
    [`md-input-${status}`]: status !== undefined && status != null,
  });
  console.log("className",textClass);
};*/

const renderField = ({ input, type, width, status, title, meta: { touched, error } }) => (
  <div>
    <label>{title}</label>
    <input {...input} className={textClass(width, status)} type={type} />
    {touched && error && <span>{error}</span>}
  </div>

);

renderField.propTypes = {
  /**
   * 
   */
  input: PropTypes.object,
  type: PropTypes.string,
  meta: PropTypes.object,
  /**
   * Class name controlling width of textbox. Available values, large, medium, small or mini
   */
  width: PropTypes.string,
  /**
   * Style of textbox. i.e. Success, Failure or Default
   */
  status: PropTypes.string,
};

const PostForm = (props) => {
  const { handleSubmit, submitting } = props;
  return (
    <div>
      <form onSubmit={handleSubmit}>

        <div className="uk-form-row">
          <Field name="firstName" component={renderField} type="text"
            placeholder="First Name" width="large" status="dafault" title="First Name" />
        </div>
        <div className="uk-form-row">
          <Field name="lastName" component={renderField} type="text"
            placeholder="Last Name" width="large" status="dafault" title="Last Name" />
        </div>
        <div className="uk-form-row">
          <Field name="email" component={renderField} type="text"
            placeholder="Email" width="large" status="default" title="Email" />
        </div>
        <div className="uk-form-row">
          <Field name="phoneNo" component={renderField} type="text"
            placeholder="Phone No" width="large" status="" title="Phone No" />
        </div>
        <button type="submit" disabled={submitting} >Submit</button>
      </form>
    </div>
  );
};
PostForm.propTypes = {
  handleSubmit: PropTypes.func,
  submitting: PropTypes.bool,
};

export default reduxForm({
  form: 'postForm',
  validate,
})(PostForm);

0 个答案:

没有答案