React Rebass 表单完整参考

React Rebass 是一个开源的 React UI 组件库，提供了许多通用的 UI 组件，包括表单组件。本文将介绍 React Rebass 提供的表单组件及其用法。

安装

使用 npm 安装 React Rebass：

npm install rebass

表单组件

Input

Input 组件用于输入文本，可以设置类型、占位符、初始值、禁用状态及可编辑状态等属性。以下是 Input 组件的用法示例：

import { Input } from 'rebass';

function MyForm() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <form>
      <Input
        type="text"
        placeholder="请输入你的名字"
        value={value}
        onChange={handleChange}
      />
    </form>
  );
}

Props

| 名称 | 类型 | 默认值 | 说明 | | ----------- | -------- | ------ | ------------------------------------ | | type | string | 'text' | 输入类型，取值包括 'text' 和 'email' | | placeholder | string | | 占位符文本 | | value | string | | 初始值 | | onChange | function | | 输入变化回调 | | disabled | boolean | false | 是否禁用 | | readOnly | boolean | false | 是否只读 |

Label

Label 组件用于描述一个表单控件，可以设置文本、关联的表单控件 ID 及样式等属性。以下是 Label 组件的用法示例：

import { Label, Input } from 'rebass';

function MyForm() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <form>
      <Label htmlFor="name">姓名</Label>
      <Input
        id="name"
        type="text"
        placeholder="请输入你的名字"
        value={value}
        onChange={handleChange}
      />
    </form>
  );
}

Props

| 名称 | 类型 | 默认值 | 说明 | | -------- | ------ | ------ | ----------------------------------------------------------------- | | htmlFor | string | | 关联的表单控件 ID，必须设置为关联控件的 ID，才能使 Label 正确工作 | | children | node | | Label 显示的文本 |

Textarea

Textarea 组件用于输入多行文本，可以设置行数、占位符、初始值、禁用状态及可编辑状态等属性。以下是 Textarea 组件的用法示例：

import { Textarea } from 'rebass';

function MyForm() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <form>
      <Label htmlFor="comment">评论</Label>
      <Textarea
        id="comment"
        rows={5}
        placeholder="请输入你的评论"
        value={value}
        onChange={handleChange}
      />
    </form>
  );
}

Props

| 名称 | 类型 | 默认值 | 说明 | | ----------- | -------- | ------ | ---------------------- | | rows | number | 3 | 行数 | | placeholder | string | | 占位符文本 | | value | string | | 初始值 | | onChange | function | | 输入变化回调 | | disabled | boolean | false | 是否禁用 | | readOnly | boolean | false | 是否只读 |

Checkbox

Checkbox 组件用于多选，可以设置初始选中状态、禁用状态及可编辑状态等属性。以下是 Checkbox 组件的用法示例：

import { Checkbox } from 'rebass';

function MyForm() {
  const [checked, setChecked] = useState(false);

  const handleChange = (event) => {
    setChecked(event.target.checked);
  };

  return (
    <form>
      <Checkbox
        id="agree"
        checked={checked}
        onChange={handleChange}
      >
        我已阅读并同意《用户协议》
      </Checkbox>
    </form>
  );
}

Props

| 名称 | 类型 | 默认值 | 说明 | | -------- | -------- | ------ | ------------------ | | checked | boolean | false | 初始选中状态 | | onChange | function | | 选中状态变化回调 | | disabled | boolean | false | 是否禁用 | | readOnly | boolean | false | 是否只读 |

Radio

Radio 组件用于单选，可以设置选项、初始选中状态、禁用状态及可编辑状态等属性。以下是 Radio 组件的用法示例：

import { Radio, RadioGroup } from 'rebass';

function MyForm() {
  const [value, setValue] = useState('option1');

  const handleChange = () => {
    setValue(event.target.value);
  };

  return (
    <form>
      <RadioGroup>
        <Radio
          name="option"
          value="option1"
          checked={value === 'option1'}
          onChange={handleChange}
        >
          选项一
        </Radio>
        <Radio
          name="option"
          value="option2"
          checked={value === 'option2'}
          onChange={handleChange}
        >
          选项二
        </Radio>
        <Radio
          name="option"
          value="option3"
          checked={value === 'option3'}
          onChange={handleChange}
        >
          选项三
        </Radio>
      </RadioGroup>
    </form>
  );
}

Props

Radio

| 名称 | 类型 | 默认值 | 说明 | | -------- | -------- | ------ | ------------------------------------------------------------ | | name | string | | 单选框分组名称，分组内单选框必须设置相同的分组名称 | | value | string | | 单选框的值 | | checked | boolean | false | 初始选中状态 | | onChange | function | | 选中状态变化回调 | | disabled | boolean | false | 是否禁用 | | readOnly | boolean | false | 是否只读 |

RadioGroup

| 名称 | 类型 | 默认值 | 说明 | | ------------ | -------- | ------ | --------------------------------------- | | name | string | | 单选框分组名称，分组内所有单选框相同 | | defaultValue | string | | 默认选中的单选框的值 | | value | string | | 选中的单选框的值 | | onChange | function | | 选中状态变化回调 | | disabled | boolean | false | 是否禁用 | | readOnly | boolean | false | 是否只读 | | children | node | | 具有 Radio 组件属性的 React 子元素列表 |

Select

Select 组件用于选择单个选项，可以设置选项、占位符、初始选中项、禁用状态及可编辑状态等属性。以下是 Select 组件的用法示例：

import { Select } from 'rebass';

function MyForm() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <form>
      <Label htmlFor="department">部门</Label>
      <Select
        id="department"
        value={value}
        onChange={handleChange}
      >
        <option value="">请选择部门</option>
        <option value="hr">人力资源部</option>
        <option value="dev">研发部</option>
        <option value="marketing">市场部</option>
      </Select>
    </form>
  );
}

Props

| 名称 | 类型 | 默认值 | 说明 | | ----------- | -------- | ------ | ------------------------ | | value | string | | 初始选中项的值 | | onChange | function | | 选中项变化回调 | | placeholder | string | | 占位符文本 | | disabled | boolean | false | 是否禁用 | | readOnly | boolean | false | 是否只读 | | children | node | | 具有 option 属性的子元素 |

Slider

Slider 组件用于选择一个范围内的值，可以设置最小值、最大值、步长、初始值及禁用状态等属性。以下是 Slider 组件的用法示例：

import { Slider } from 'rebass';

function MyForm() {
  const [value, setValue] = useState(50);

  const handleChange = (event) => {
    setValue(Number(event.target.value));
  };

  return (
    <form>
      <Slider
        value={value}
        onChange={handleChange}
      />
      <p>选择值为 {value}</p>
    </form>
  );
}

Props

| 名称 | 类型 | 默认值 | 说明 | | ------------ | -------- | ------ | ------------ | | min | number | 0 | 最小值 | | max | number | 100 | 最大值 | | step | number | 1 | 步长 | | value | number | 50 | 初始值 | | onChange | function | | 值变化回调 | | disabled | boolean | false | 是否禁用 | | readOnly | boolean | false | 是否只读 | | color | string | blue | 颜色 | | backgroundColor| string | gray | 背景颜色 | | borderRadius| string | 16px | 圆角 | | barHeight | string | 8px | 进度条高度 | | thumbWidth | string | 24px | 滑块宽度 | | thumbHeight | string | 24px | 滑块高度 | | children | node | | 具有标签属性的子元素 |

结语

以上是 React Rebass 提供的表单组件的使用方法，希望对你在开发 React 应用中使用表单组件有所帮助。