redux-form字段类型文件

简介

redux-form是一个React表单库，它可以让你轻松管理表单的状态，并且带来基于redux的极佳数据存储能力。 它提供了一个包含表单组件的集合，其中每个组件都内置了如数据同步、数据验证和提交处理等行为。

这篇文章将会介绍redux-form中的字段类型，并且告诉你如何在你的表单中使用它们。

支持的字段类型

redux-form支持以下的字段类型：

1. Input
2. Checkbox
3. Radio
4. Select
5. TextArea

Input

Input是redux-form的默认字段类型。你可以使用它来渲染一个基本的输入框，例如：

<Field name="username" component="input" type="text" />

有关Field和component的更多信息可以从redux-form的文档中获取。

Checkbox

Checkbox类型用于渲染一个多选框 ( checkbox ) 。你可以使用它来渲染一个单独的多选框或者一个多选框列表，例如：

<Field name="hobbies" component={renderCheckbox} type="checkbox" value="swimming" />

function renderCheckbox(props) {
  return (
    <div className="checkbox">
      <label>
        <input type="checkbox" {...props.input} checked={props.input.value} />
        {props.label}
      </label>
    </div>
  );
}

Radio

Radio类型用于渲染一个单选框 ( radio ) 。你可以使用它来渲染一个单独的单选框或者一个单选框列表，例如：

<Field name="gender" component={renderRadio} type="radio" value="male" />

function renderRadio(props) {
  return (
    <div className="radio">
      <label>
        <input type="radio" {...props.input} checked={props.input.value === props.value} />
        {props.label}
      </label>
    </div>
  );
}

Select

Select类型用于渲染一个下拉列表框 ( select ) 。你可以使用它来渲染一个单选或多选的下拉列表，例如：

<Field name="preferredLanguage" component={renderSelect}>
  <option value="">请选择语言</option>
  <option value="en">英语</option>
  <option value="fr">法语</option>
  <option value="de">德语</option>
  <option value="ja">日语</option>
</Field>

function renderSelect(props) {
  const { input, meta, children, ...rest } = props;
  return (
    <div className={meta.error && meta.touched ? 'form-group has-error' : 'form-group'}>
      <label>{props.label}</label>
      <select {...input} {...rest}>
        {children}
      </select>
      {meta.error && meta.touched && <span className="help-block">{meta.error}</span>}
    </div>
  );
}

TextArea

TextArea类型用于渲染一个文本域 ( textarea ) ，例如：

<Field name="message" component={renderTextarea} />

function renderTextarea(props) {
  const { input, meta, ...rest } = props;
  return (
    <div className={meta.error && meta.touched ? 'form-group has-error' : 'form-group'}>
      <label>{props.label}</label>
      <textarea {...input} {...rest} />
      {meta.error && meta.touched && <span className="help-block">{meta.error}</span>}
    </div>
  );
}

结论

redux-form提供了许多字段类型，你可以根据你的需要来选择合适的类型。不管你选择哪种类型，最终它们都可以被redux-form管理并存储在redux store中。