时间戳

首页 > 解决方案 > React Textfield / redux 表单组件不允许写入

reactjs - React Textfield / redux 表单组件不允许写入

问题描述

表单渲染：

return (
        <form onSubmit={handleSubmit}>
        <Field
          name="login"
          component={RenderTextField}
          label="Login"
        />     
        <Field
          name="password"
          component={RenderTextField}
          label="Password"
        />  
        </form>
)

证实：

const RenderTextField = ({
  label,
  input,
  meta: { touched, invalid, error },
  ...custom
},props) => {
  const classes = useStyles();
  return (
    <TextField
    label={label}
    placeholder={label}
    error={touched && invalid}
    helperText={touched && error}

    {...input}
    {...custom}
  />
  );
}
const validate = values => {
  console.log(values);
  const errors = {}
  const requiredFields = [
    'login',
    'password',
  ]
  requiredFields.forEach(field => {
    if (!values[field]) {
      errors[field] = 'Required'
    }
  })
  if (
    values.email &&
    !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)
  ) {
    errors.email = 'Invalid email address'
  }
  return errors
}

我不知道错误在哪里，它只在我的验证中输入一次，我无法在我的文本字段中输入任何内容我正确导出了我的表单，我从 redux 表单文档中获得的验证我的 RenderTextField 也有人可以帮助我吗？

//

即使我没有点击它首先验证的文本字段并返回我，我的验证也会正常进行：

错误：

{登录名：“必填”，密码：“必填”}

但我不能在我的文本字段中写字，

我发现问题是：

{...input}
{...custom}

标签： reactjsredux-form

解决方案

推荐阅读