Form（文本框）

填写类表单-文本框。Form UI 提供与WeLink规范一致的表单视图。

效果示例

import React from 'react';
import {
  Input, Form, FormCell, FormHeader, FormBody, FormLayout, FormExplan
} from '@wecode/react-weui';

const _marginTop = { marginTop: 30 };
export default class FormInput extends React.Component {
  state={
    value1: '', 
    value2: '已输入内容', 
    value3: '已输入内容', 
    value4: '', 
    value5: '', 
    value6: '输入错误内容' 
  }

  handleChangeValue =(key, value) =>{
    this.setState({ [key]: value });
  }

  render() {
    const {
      value1, value2, value3, value4, value5, value6 
    } = this.state;
    return (
      <section>
        <Form form>
          <FormCell form access line>
            <FormHeader>标题</FormHeader>
            <FormBody beRight>
              <Input placeholder="请输入" value={value1} onChange={e=>this.handleChangeValue('value1', e.target.value)} />
            </FormBody>
          </FormCell>
          <FormCell form access>
            <FormHeader>标题</FormHeader>
            <FormBody beRight>
              <Input placeholder="请输入" value={value2} onChange={e=>this.handleChangeValue('value2', e.target.value)} />
            </FormBody>
          </FormCell>
        </Form>

        <Form style={_marginTop} form>
          <FormCell form access explan>
            <FormLayout>
              <FormHeader>标题</FormHeader>
              <FormBody beRight>
                <Input placeholder="请输入" value={value3} onChange={e=>this.handleChangeValue('value3', e.target.value)} />
              </FormBody>
            </FormLayout>
            <FormExplan error beRight>
                错误信息文本，右对齐
            </FormExplan>
          </FormCell>
        </Form>

        <Form style={_marginTop} form>
          <FormCell form access explan>
            <FormLayout>
              <FormHeader>标题</FormHeader>
              <FormBody beRight>
                <Input placeholder="请输入" value={value4} onChange={e=>this.handleChangeValue('value4', e.target.value)} />
              </FormBody>
            </FormLayout>
            <FormExplan>
                辅助文本说明，辅助文本说明辅助文本说明辅助文本说明
                辅助文本说明，辅助文本说明辅助文本说明辅助文本说明
                辅助文本说明，辅助文本说明辅助文本说明辅助文本说明
                辅助文本说明，辅助文本说明辅助文本说明辅助文本说明
            </FormExplan>
          </FormCell>
        </Form>

        <Form style={_marginTop} form>
          <FormCell form verticality access explan>
            <FormHeader>标题</FormHeader>
            <FormBody>
              <Input placeholder="请输入" value={value5} onChange={e=>this.handleChangeValue('value5', e.target.value)} />
            </FormBody>
            <FormExplan>
              辅助文本说明，辅助文本说明辅助文本说明辅助文本说明
            </FormExplan>
          </FormCell>
        </Form>

        <Form style={_marginTop} form>
          <FormCell form verticality access explan>
            <FormHeader>标题</FormHeader>
            <FormBody>
              <Input placeholder="请输入" value={value6} onChange={e=>this.handleChangeValue('value6', e.target.value)} />
            </FormBody>
            <FormExplan error>
              错误信息文本，左对齐
            </FormExplan>
          </FormCell>
        </Form>
      </section>
    );
  }
}