我在提交按钮控件上收到此错误。 我不明白为什么我会收到这个错误,我的错误在哪里。我想在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);