Question

我正在尝试为我的Redux表单添加验证。

这对于我使用常规输入或textarea案例的所有组件都很有用，我可以为...构建自定义组件...

从这里开始，我可以抓住添加到renderField的args并使用这些值。但是在我的选择列表中，我有另一种方法，所以我不确定如何超出.meta.error && .meta.touched

renderField(field) {
    if (field) {
      return (
        <div className="field">
          <div className="control">
            <label className="label">{field.label}</label>
            <field.type
              className={field.type}
              type={field.textType}
              {...field.input}
            />
            {field.meta.touched &&
              field.meta.error && (
                <p className="error">
                  <i className="fa fa-exclamation-circle" aria-hidden="true" />
                  {field.meta.error}
                </p>
              )}
          </div>
        </div>
      )
    }
  }  

render(){
 return(
   <Field
     label="Title"
     name="title"
     type="input"
     textType="text"
     component={this.renderField}
   />
 )
}

但我也有一个选择列表，在这里我无法使用它。

<div className="field">
                <div className="control">
                  <label className="label">Category</label>
                  <Field name="category" className="select" component="select">
                    <option value={false} />
                    {categories.map(c => (
                      <option key={c.name} value={c.path}>
                        {c.name}
                      </option>
                    ))}
                  </Field>
                </div>
              </div>
              {/* This needs to be inserted here some how...

                {field.meta.touched &&
                  field.meta.error && (
                    <p className="error">
                      <i className="fa fa-exclamation-circle" aria-hidden="true" />
                      {field.meta.error}
                    </p>
                  )}
                */}

验证看起来像。

function validate(values) {
  const errors = {}
  if (!values.title || values.title.length < 5) {
    errors.title = 'Please enter a title with at least 5 characters'
  }

  if (!values.author) {
    errors.author = "What's your name?"
  }

  if (values.category === '') {
    errors.category = 'What category does the following fit in?'
  }

  if (!values.body) {
    errors.body = 'What Would You Like To Share?'
  }
  return errors
}

Answer 1

我最终为renderSelect创建了一个函数。

  renderSelect(field) {
    if (field) {
      return (
        <div className="field">
          <div className="control">
            <label className="label">{field.label}</label>
            <select className="select" {...field.input}>
              <option />
              {field.data.map(c => (
                <option key={c.name} value={c.path}>
                  {c.name}
                </option>
              ))}
            </select>
            {field.meta.touched &&
              field.meta.error && (
                <p className="error">
                  <i className="fa fa-exclamation-circle" aria-hidden="true" />
                  {field.meta.error}
                </p>
              )}
          </div>
        </div>
      )
    }
  }

<Field
 label="Category"
 name="category"
 data={categories}
 component={this.renderSelect}
>

ReduxForm：选择<选项>不对错误

1 个答案: