表单 - hana-ui

表单

表单模块。

基础

import React, {Component} from 'react';
import {Form, FormItem, Select, Option, Text,
  Checkbox, CheckboxGroup,
  Radio, RadioGroup,
  Button, TextArea
} from 'hana-ui';

/**
 * @en
 * Base
 * A simple form used `Form` component.
 *
 * @cn
 * 基础
 *
 * 一个简单的表单示例。
 */
export default class ExampleBase extends Component {
  state = {
    value: [],
    seasons: [],
    animal: '1'
  }

  handleSubmit = e => {
    e.preventDefault();
    console.log('submit'); // eslint-disable-line
  }

  render() {
    return (
      <Form onSubmit={this.handleSubmit} style={{width: 600, background: '#fff', padding: 20}}>
        <FormItem label="Username:">
          <Select
            name="username"
            auto
            multiple
            value={this.state.value}
            onChange={v => this.setState({value: v})}
          >
            <Option label="Azusa" value="1" />
            <Option label="Mio" value="2" />
          </Select>
        </FormItem>

        <FormItem label="Suggestions:">
          <Text withIcon={false} auto />
        </FormItem>

        <FormItem label="Seasons:">
          <CheckboxGroup value={this.state.seasons} onChange={seasons => this.setState({seasons})}>
            <Checkbox label="Spring" value="1" />
            <Checkbox label="Summer" value="2" />
            <Checkbox label="Autumn" value="3" />
            <Checkbox label="Winter" value="4" />
          </CheckboxGroup>
        </FormItem>

        <FormItem label="Animals:">
          <RadioGroup value={this.state.animal} onChange={animal => this.setState({animal})}>
            <Radio label="Cat" value="1" />
            <Radio label="Dog" value="2" />
            <Radio label="Neko" value="3" />
            <Radio label="Inu" value="4" />
          </RadioGroup>
        </FormItem>

        <FormItem label="Code:">
          <TextArea
            auto
            normal={{show: true, message: 'This is code'}}
          />
        </FormItem>

        <FormItem label="">
          <Button
            type="primary"
            onClick={this.handleSubmit}
          >
            Submit
          </Button>
        </FormItem>
      </Form>
    );
  }
}

一个简单的表单示例。

较复杂的例子

import React, {Component} from 'react';
import {
  Form, FormItem, FormGroup,
  Select, Option, Text,
  Checkbox, CheckboxGroup,
  Radio, RadioGroup,
  Button
} from 'hana-ui';

/**
 * @en
 * Complex
 * A complex form used `Form` component, having nested items and info.
 *
 * @cn
 * 较复杂的例子
 *
 * 一个较复杂的表单示例，带有嵌套、提示。
 */
export default class ExampleComplex extends Component {
  state = {
    value: [],
    seasons: [],
    animal: '1'
  }

  handleSubmit = e => {
    e.preventDefault();
    console.log('submit'); // eslint-disable-line
  }

  render() {
    return (
      <Form onSubmit={this.handleSubmit} style={{width: 600, background: '#fff', padding: 20}}>
        <FormItem label="Sex:">
          <p className="hana-form-text">Male</p>
        </FormItem>

        <FormGroup label="Name:">
          <FormItem>
            <Select
              name="firstname"
              defaultLabel="Choose FirstName"
              auto
            >
              <Option label="Azusa" value="1" />
              <Option label="Mio" value="2" />
            </Select>
          </FormItem>
          <FormItem>
            <Select
              name="lastname"
              defaultLabel="Choose LastName"
              auto
            >
              <Option label="Nakano" value="1" />
              <Option label="Akiyama" value="2" />
            </Select>
          </FormItem>
        </FormGroup>

        <FormGroup label="Inputs:">
          <FormItem label="Input1" status="error" info="something wrong">
            <Text withIcon={false} auto />
          </FormItem>

          <FormItem label="Input2" status="error" info="something wrong">
            <Text withIcon={false} auto />
          </FormItem>
        </FormGroup>

        <FormItem label="Seasons:" status="warn" info="something need warning">
          <CheckboxGroup value={this.state.seasons} onChange={seasons => this.setState({seasons})}>
            <Checkbox label="Spring" value="1" />
            <Checkbox label="Summer" value="2" />
            <Checkbox label="Autumn" value="3" />
            <Checkbox label="Winter" value="4" />
          </CheckboxGroup>
        </FormItem>

        <FormItem label="Animals:" status="success" info="something good">
          <RadioGroup value={this.state.animal} onChange={animal => this.setState({animal})}>
            <Radio label="Cat" value="1" />
            <Radio label="Dog" value="2" />
            <Radio label="Neko" value="3" />
            <Radio label="Inu" value="4" />
          </RadioGroup>
        </FormItem>

        <FormItem label="">
          <Button type="primary">submit</Button>
        </FormItem>
      </Form>
    );
  }
}

一个较复杂的表单示例，带有嵌套、提示。

标签位置

import React, {Component} from 'react';
import {
  Form, FormItem, FormGroup,
  Select, Option, Text,
  Checkbox, CheckboxGroup,
  Radio, RadioGroup,
  Button
} from 'hana-ui';

/**
 * @en
 * Label Position
 *
 * Hana provides two label position styles, use `labelPosition` to control the label's position.
 *
 * @cn
 * 标签位置
 *
 * hana提供了2种不同的表单样式，一种是标签位于左侧，一种是标签位于上方。
 */
export default class ExampleLabelPosition extends Component {
  state = {
    value: [],
    seasons: [],
    animal: '1'
  }

  handleSubmit = e => {
    e.preventDefault();
    console.log('submit'); // eslint-disable-line
  }

  render() {
    return (
      <Form
        onSubmit={this.handleSubmit}
        style={{width: 600, background: '#fff', padding: 20}}
        labelPosition="top"
      >
        <FormGroup label="Name">
          <FormItem>
            <Select
              name="firstname"
              defaultLabel="Choose FirstName"
              auto
            >
              <Option label="Azusa" value="1" />
              <Option label="Mio" value="2" />
            </Select>
          </FormItem>
          <FormItem>
            <Select
              name="lastname"
              defaultLabel="Choose LastName"
              auto
            >
              <Option label="Nakano" value="1" />
              <Option label="Akiyama" value="2" />
            </Select>
          </FormItem>
        </FormGroup>

        <FormGroup>
          <FormItem label="Input1 a very very very very long name" status="error" info="something wrong">
            <Text withIcon={false} auto />
          </FormItem>

          <FormItem label="Input2" status="error" info="something wrong">
            <Text withIcon={false} auto />
          </FormItem>
        </FormGroup>

        <FormItem label="Seasons" status="warn" info="something need warning">
          <CheckboxGroup value={this.state.seasons} onChange={seasons => this.setState({seasons})}>
            <Checkbox label="Spring" value="1" />
            <Checkbox label="Summer" value="2" />
            <Checkbox label="Autumn" value="3" />
            <Checkbox label="Winter" value="4" />
          </CheckboxGroup>
        </FormItem>

        <FormItem label="Animals" status="success" info="something good">
          <RadioGroup value={this.state.animal} onChange={animal => this.setState({animal})}>
            <Radio label="Cat" value="1" />
            <Radio label="Dog" value="2" />
            <Radio label="Neko" value="3" />
            <Radio label="Inu" value="4" />
          </RadioGroup>
        </FormItem>

        <FormItem label="">
          <Button type="primary">submit</Button>
        </FormItem>
      </Form>
    );
  }
}

hana提供了2种不同的表单样式，一种是标签位于左侧，一种是标签位于上方。

自定义

import React, {Component} from 'react';
import {
  Form, FormItem, FormGroup,
  Select, Option, Text,
  Checkbox, CheckboxGroup,
  Radio, RadioGroup,
  Button
} from 'hana-ui';

/**
 * @en
 * Custom
 *
 * Use `labelStyle`, `itemLabelStyle`, `elementStyle` to control the `Form`'s style.
 *
 * @cn
 * 自定义
 *
 * 自定义表单，使用`labelStyle`, `itemLabelStyle`, `elementStyle`来控制表单元素的样式。
 */
export default class ExampleCustom extends Component {
  state = {
    value: [],
    seasons: [],
    animal: '1'
  }

  handleSubmit = e => {
    e.preventDefault();
    console.log('submit'); // eslint-disable-line
  }

  render() {
    const labelStyle = {
      width: 100
    };
    const itemLabelStyle = {
      color: '#6cd4a4',
      width: 'auto'
    };
    const elementStyle = {
      color: '#6cd4a4'
    };
    return (
      <Form onSubmit={this.handleSubmit} style={{width: 600, background: '#fff', padding: 20}}>
        <FormItem label="Sex:" labelStyle={labelStyle} elementStyle={elementStyle}>
          <p className="hana-form-text">Male</p>
        </FormItem>

        <FormGroup label="Name:" labelStyle={labelStyle}>
          <FormItem>
            <Select
              name="firstname"
              defaultLabel="Choose FirstName"
              auto
            >
              <Option label="Azusa" value="1" />
              <Option label="Mio" value="2" />
            </Select>
          </FormItem>
          <FormItem>
            <Select
              name="lastname"
              defaultLabel="Choose LastName"
              auto
            >
              <Option label="Nakano" value="1" />
              <Option label="Akiyama" value="2" />
            </Select>
          </FormItem>
        </FormGroup>

        <FormGroup label="Inputs:" labelStyle={labelStyle}>
          <FormItem label="Input1" status="error" info="something wrong" labelStyle={itemLabelStyle}>
            <Text withIcon={false} auto />
          </FormItem>

          <FormItem label="Input2" status="error" info="something wrong" labelStyle={itemLabelStyle}>
            <Text withIcon={false} auto />
          </FormItem>
        </FormGroup>

        <FormItem label="Seasons:" status="warn" info="something need warning" labelStyle={labelStyle}>
          <CheckboxGroup value={this.state.seasons} onChange={seasons => this.setState({seasons})}>
            <Checkbox label="Spring" value="1" />
            <Checkbox label="Summer" value="2" />
            <Checkbox label="Autumn" value="3" />
            <Checkbox label="Winter" value="4" />
          </CheckboxGroup>
        </FormItem>

        <FormItem label="Animals:" status="success" info="something good" labelStyle={labelStyle}>
          <RadioGroup value={this.state.animal} onChange={animal => this.setState({animal})}>
            <Radio label="Cat" value="1" />
            <Radio label="Dog" value="2" />
            <Radio label="Neko" value="3" />
            <Radio label="Inu" value="4" />
          </RadioGroup>
        </FormItem>

        <FormItem label="" labelStyle={labelStyle}>
          <Button type="primary">submit</Button>
        </FormItem>
      </Form>
    );
  }
}

自定义表单，使用labelStyle, itemLabelStyle, elementStyle来控制表单元素的样式。

属性说明

属性名	类型	默认值	说明
children	node		表单的子元素
onSubmit	function		表单提交时的回调
labelPosition	enum: 'top' 'left'	'left'	表单元素标签的位置
className	string		表单的`class`

未在文档中说明的属性将会被自动加到根元素或form元素上。

属性说明

属性名	类型	默认值	说明
children	node		子节点
label	node	null	`FormGroup`的标签
labelPosition	enum: 'top' 'left'	'left'	`FormGroup`的标签位置
className	string		`FormGroup`的`class`
labelStyle	object		`FormGroup`的标签样式
elementStyle	object		`FormGroup`的元素样式
style	object		`FormGroup`的样式

未在文档中说明的属性将会被自动加到根元素或form元素上。

属性说明

属性名	类型	默认值	说明
children	node		子节点
label	node	null	表单项的标签
info	node		表单项的提示信息
status	enum: 'normal' 'success' 'error' 'warn'	'normal'	表单项的状态
labelPosition	enum: 'top' 'left'	'left'	表单项的标签位置
labelStyle	object		表单项标签的样式
elementStyle	object		表单项的样式
className	string		表单项的`class`

未在文档中说明的属性将会被自动加到根元素或form元素上。