Form

表单相关组件。

组件

Field

<Field> 组件，用于生成 <input> 元素。

Props

type

PropType: string

输入框类型，可选值为：

• HTML input 元素的 type 属性的值
• 'select'
• 'textarea'

默认值：defaultValue / defaultChecked

<Field> 组件默认值设置遵循 React 对 <input>、textarea 等表单组件的处理方式。

• defaultValue: 适用于 type 为 text、textarea 等可输入类型及 select 的 <Field> 组件。

当 type 为 select 时：

• 若为多选（设置了 multiple 属性），则默认值应该传递一个数组；

<Field
  type="select"
  label="Multiple Select"
  multiple
  defaultValue={['x', 'y']}
>
{/*...*/}
</Field>

• 若为单选，则传递字符串。

<Field
  type="select"
  label="Single Select"
  defaultValue="x"
>
{/*...*/}
</Field>

getValue() 的返回值类型也遵循上面的规则。

• defaultChecked: 适用于 type 属性为 radio、checkbox 的 <Field> 组件。

label

PropType: node

输入框标签。

btnBefore

PropType: node

组建输入框组时输入框前面的按钮。

btnAfter

PropType: node

组建输入框组时输入框后面的按钮。

labelBefore

PropType: node

组建输入框组时输入框前面的文字。

labelAfter

PropType: node

组建输入框组时输入框后面的文字。

containerClassName

PropType: string

输入框容器 className，设置 label/btnAfter/btnBefore/labelAfter/labelBefore 中任意属性后应用在包裹输入框的容器上。

如：

<Field
  label="Your Name"
  containerClassName="my-label"
  placeholder="What's your name."
/>

渲染为：

<label class="field-container my-label">
  <span class="field-label">Your Name</span>
  <input type="text" placeholder="What's your name." class="field">
</label>

方法

.getValue()

返回输入框的值。

.getChecked()

返回输入框是否选中，当 type 为 radio 或 checkbox 时有效。

.getSelectedOptions()

返回 <select> 的值，type 为 'select' 时有效。

Switch

<Switch> 组件，开关按钮。

Props

name

PropType: string

name 属性应用到内部的 input 元素上，可用于传统的表单提交。

value

PropType: bool

value 值应用到内部 input 元素的 defaultChecked 属性上，设置是否选中（uncontrolled）。

disabled

PropType: bool

是否禁用 Switch。

onValueChange

PropType: func

Switch 值发生变化时处理函数。

Ref

field

指向 Switch 内部的 input 元素，可用于获取 Switch 状态。

function handleSwitch() {
  console.log(this.refs.field.checked);
}
const mySwitch = <Switch onValueChange={handleSwitch} />;

方法

.getValue()

获取状态，同使用 ref 一样，选中时返回 true，否则返回 false。

function handleSwitch() {
  console.log(this.getValue());
}
const mySwitch = <Switch onValueChange={handleSwitch} />;

示例

import React from 'react';
import {
  Container,
  Grid,
  Col,
  Group,
  Icon,
  List,
  Field,
  Button,
  Switch,
} from 'amazeui-touch';
let fields = [
  {
    label: 'Username',
    type: 'text',
    icon: 'person'
  },
  {
    label: 'Password',
    type: 'password',
    icon: 'info'
  },
  {
    label: 'Birth date',
    type: 'date',
    icon: 'refresh'
  }
];
const devices = ['iPhone 6', 'MacBook Pro Retina', 'iMac 5K'];
function handleSwitch() {
  console.log(this.getValue());
}
const mySwitch = <Switch onValueChange={handleSwitch} defaultChecked />;
const FormExample = React.createClass({
  handleSubmit(e) {
    e.preventDefault();
    console.log(this.refs.select.getValue());
  },
  render() {
    return (
      <Container {...this.props}>
        <Group
          header="基本样式"
        >
          <Field
            label="Your Name"
            containerClassName="my-label"
            placeholder="What's your name."
          />
          <Field
            label="Password"
            placeholder="Yout password."
            type="password"
          />
          <Field
            label="Age"
            placeholder="Your age."
            type="number"
          />
          <Field
            type="select"
            label="Select"
            ref="select"
            defaultValue="m"
          >
            <option value="m">Male</option>
            <option value="f">Female</option>
          </Field>
          <Field
            label="Range"
            type="range"
            defaultValue="10"
          />
          <Field
            label="Commnet"
            placeholder="Say something you whant."
            type="textarea"
          />
          <Field
            value="提交"
            type="submit"
            amStyle="secondary"
            block
            onClick={this.handleSubmit}
          />
        </Group>
        {/*<h3>Range</h3>
        <p>
          <input type="range" />
        </p>
        <h3>Progress</h3>
        <p>
          <progress value="50" max="100" />
          <progress max="100" />
          <progress className="high" value="25" max="100" />
          <progress className="medium" value="75" max="100" />
          <progress className="low" value="60" max="100" />
        </p>
        <h3>Meter</h3>
        <p>
          <meter
            min="0"
            max="100"
            low="25"
            high="75"
            optimum="100"
            value="10"
          />
          <meter min="0" max="100" low="25" high="75" optimum="100"
                 value="50" />
          <meter min="0" max="100" low="25" high="75" optimum="100"
                 value="80" />
        </p>*/}
        <Group
          header="Form Set"
        >
          <div className="form-set">
            <Field placeholder="Name." />
            <Field placeholder="Email." />
            <Field placeholder="Password." />
          </div>
          <Button amStyle="primary" block>提交</Button>
        </Group>
        <Group
          header="Field Group"
        >
          <Field
            placeholder="You domain."
            labelBefore="www."
            labelAfter=".com"
            containerClassName="my-group"
          />
          <Field
            placeholder="Your email."
            labelBefore={<Icon name="person" />}
            btnAfter={<Button>Subscribe</Button>}
          />
          <Field
            placeholder="Keywords..."
            labelBefore={<Icon name="search" />}
            btnAfter={<Button>Search</Button>}
          />
        </Group>
        <h2>Form in List</h2>
        <Group
          header="Fields List"
          noPadded
        >
          <List>
            {fields.map((field, i) => {
              return (
                <List.Item
                  key={i}
                  nested="input"
                >
                  <Field
                    {...field}
                    label={null}
                    placeholder={field.label + '...'}
                  />
                </List.Item>
              );
            })}
          </List>
        </Group>
        <Group
          header="With Label"
          noPadded
        >
          <List>
            {fields.map((field, i) => {
              return (
                <List.Item
                  key={i}
                  nested="input"
                >
                  <Field
                    {...field}
                    placeholder={field.label + '...'}
                  />
                </List.Item>
              );
            })}
            <List.Item
              title="Switch"
              nested="input"
              after={mySwitch}
            />
          </List>
        </Group>
        <Group
          header="List with Icon"
          noPadded
        >
          <List>
            {fields.map((field, i) => {
              return (
                <List.Item
                  key={i}
                  media={<Icon name={field.icon} />}
                  nested="input"
                >
                  <Field
                    {...field}
                    label={null}
                    placeholder={field.label + '...'}
                  />
                </List.Item>
              );
            })}
          </List>
        </Group>
        <Group
          header="List with Label & Icon"
          noPadded
        >
          <List>
            {fields.map((field, i) => {
              return (
                <List.Item
                  key={i}
                  media={<Icon name={field.icon} />}
                  nested="input"
                >
                  <Field
                    {...field}
                    placeholder={field.label + '...'}
                  />
                </List.Item>
              );
            })}
          </List>
        </Group>
        <h3>Checkboxes & Radios</h3>
        <Group
          header="Checkboxes"
          footer="点击列表选择"
          noPadded
        >
          <List>
            {devices.map((device, i) => {
              return (
                <List.Item
                  nested="checkbox"
                  key={i}
                >
                  <Field
                    label={device}
                    type="checkbox"
                    name="checkbox-list-1"
                  >
                  </Field>
                </List.Item>
              );
            })}
          </List>
        </Group>
        <Group
          header="Radios"
          footer="点击选择一项"
          noPadded
        >
          <List>
            {devices.map((device, i) => {
              return (
                <List.Item
                  nested="radio"
                  key={i}
                >
                  <Field
                    label={device}
                    type="radio"
                    name="radio-list-1"
                  >
                  </Field>
                </List.Item>
              );
            })}
          </List>
        </Group>
      </Container>
    );
  }
});
export default FormExample;

DemoCopy

原文: http://t.amazeui.org/#/docs/form