Javascript Redux表单返回带有简单验证的意外错误。为什么?
我在Redux form的帮助下创建了一个新表单,下面我收到一条错误消息,我不知道它来自哪里:Javascript Redux表单返回带有简单验证的意外错误。为什么?,javascript,reactjs,react-redux,redux-form,Javascript,Reactjs,React Redux,Redux Form,我在Redux form的帮助下创建了一个新表单,下面我收到一条错误消息,我不知道它来自哪里: const renderTextField = ({ input, label, meta: { touched, error }, children, type, placeholder, }) => ( <TextField className="material-form__field" label={label} type={type} er
const renderTextField = ({
input, label, meta: { touched, error }, children, type, placeholder,
}) => (
<TextField
className="material-form__field"
label={label}
type={type}
error={touched && error}
children={children}
value={input.value}
placeholder={placeholder}
onChange={(e) => {
e.preventDefault();
input.onChange(e.target.value);
}}
/>
);
renderTextField.propTypes = {
input: PropTypes.shape().isRequired,
label: PropTypes.string,
meta: PropTypes.shape({
touched: PropTypes.bool,
error: PropTypes.string,
}),
children: PropTypes.arrayOf(PropTypes.element),
type: PropTypes.string,
placeholder: PropTypes.string,
};
renderTextField.defaultProps = {
meta: null,
label: '',
children: [],
type: 'input',
placeholder: '',
};
const validate = (values) => {
const errors = {};
if (values.new_password_check !== values.new_password) {
errors.new_password = 'ERROR';
}
console.log(errors);
return errors;
};
class AccountSettings extends PureComponent {
static propTypes = {
handleSubmit: PropTypes.func.isRequired,
reset: PropTypes.func.isRequired,
};
render() {
const { handleSubmit, reset } = this.props;
return (
<form className="material-form" onSubmit={handleSubmit}>
<div>
<span className="material-form__label">Password (Optionnal)</span>
<Field
name="new_password"
component={renderTextField}
placeholder="Fill out this field only if you want to change your password"
type="password"
/>
</div>
<div>
<span className="material-form__label">Password Check (Optionnal)</span>
<Field
name="new_password_check"
component={renderTextField}
placeholder="Re-enter your new password for security reason if you wish to change it"
type="password"
/>
</div>
<div>
<span className="material-form__label">Current Password</span>
<Field
name="password"
component={renderTextField}
placeholder="Enter your current password to confirm the changes"
type="password"
/>
</div>
<ButtonToolbar className="form__button-toolbar">
<Button color="primary" type="submit">Update profile</Button>
<Button type="button" onClick={reset}>
Cancel
</Button>
</ButtonToolbar>
</form>
);
}
}
export default reduxForm({
form: 'profile_settings_form', // a unique identifier for this form
validate, // <--- validation function given to redux-form
})(AccountSettings);
const renderTextField=({
输入,标签,元:{toucted,error},子项,类型,占位符,
}) => (
{
e、 预防默认值();
input.onChange(如target.value);
}}
/>
);
renderTextField.propTypes={
输入:PropTypes.shape().isRequired,
标签:PropTypes.string,
meta:PropTypes.shape({
触摸:PropTypes.bool,
错误:PropTypes.string,
}),
子类:PropTypes.arrayOf(PropTypes.element),
类型:PropTypes.string,
占位符:PropTypes.string,
};
renderTextField.defaultProps={
梅塔:空,
标签:“”,
儿童:[],
键入:“输入”,
占位符:“”,
};
常量验证=(值)=>{
常量错误={};
if(values.new\u password\u check!==values.new\u password){
errors.new_password='ERROR';
}
console.log(错误);
返回错误;
};
类AccountSettings扩展了PureComponent{
静态类型={
handleSubmit:PropTypes.func.isRequired,
重置:需要PropTypes.func.isRequired,
};
render(){
const{handleSubmit,reset}=this.props;
返回(
密码(可选)
密码检查(可选)
当前密码
更新配置文件
取消
);
}
}
导出默认reduxForm({
表单:'配置文件\设置\表单',//此表单的唯一标识符
验证,//错误
需要是一个。若要显示错误消息,请改为执行以下操作:
<TextField
className="material-form__field"
label={label}
type={type}
error={(touched && (typeof error !== 'undefined' && error != '')} // This says there is an error
helperText={touched && error} // This will show the error message
children={children}
value={input.value}
placeholder={placeholder}
onChange={(e) => {
e.preventDefault();
input.onChange(e.target.value);
}}
/>
{
e、 预防默认值();
input.onChange(如target.value);
}}
/>
错误
需要是一个。要显示错误消息,请改为:
<TextField
className="material-form__field"
label={label}
type={type}
error={(touched && (typeof error !== 'undefined' && error != '')} // This says there is an error
helperText={touched && error} // This will show the error message
children={children}
value={input.value}
placeholder={placeholder}
onChange={(e) => {
e.preventDefault();
input.onChange(e.target.value);
}}
/>
{
e、 预防默认值();
input.onChange(如target.value);
}}
/>