Question

我尝试做简单的表单渲染，但我总是遇到此错误

Unknown props `input`, `meta` on <input> tag.

之前我已经研究过这个问题，并且除了github讨论之外没有找到任何东西，它实际上会抛出4到5个不同的实现，如何在没有达成共识的情况下完成，我也遵循了v6文档＆＃39;以这种方式实施，但无济于事。有什么建议吗？

我正在使用v6.2.0，这是我发布此内容时的最新版本。

我直接从这里的示例http://redux-form.com/6.0.0-alpha.15/examples/syncValidation/复制粘贴，仍然会出错。（我在下面附上了他们的代码）

import React from 'react'
import { Field, reduxForm } from 'redux-form'

const validate = values => {
  const errors = {}
  if (!values.username) {
    errors.username = 'Required'
  } else if (values.username.length > 15) {
    errors.username = 'Must be 15 characters or less'
  }
  if (!values.email) {
    errors.email = 'Required'
  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
    errors.email = 'Invalid email address'
  }
  if (!values.age) {
    errors.age = 'Required'
  } else if (isNaN(Number(values.age))) {
    errors.age = 'Must be a number'
  } else if (Number(values.age) < 18) {
    errors.age = 'Sorry, you must be at least 18 years old'
  }
  return errors
}

const renderField = props => (
  <div>
    <label>{props.placeholder}</label>
    <div>
      <input {...props}/>
      {props.touched && props.error && <span>{props.error}</span>}
    </div>
  </div>
)

const SyncValidationForm = (props) => {
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <form onSubmit={handleSubmit}>
      <Field name="username" type="text" component={renderField} placeholder="Username"/>
      <Field name="email" type="email" component={renderField} placeholder="Email"/>
      <Field name="age" type="number" component={renderField} placeholder="Age"/>
      <div>
        <button type="submit" disabled={submitting}>Submit</button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
      </div>
    </form>
  )
}

export default reduxForm({
  form: 'syncValidation',  // a unique identifier for this form
  validate                 // <--- validation function given to redux-form
})(SyncValidationForm)

Answer 1

因为您正在使用6.0.0-alpha.15版本的代码示例。

实施6.2.0 example应修复错误（，以防您使用redux-form v6.2.0 ）。

Credits

redux form v6，未知道具消息

1 个答案: