Form（选择）

选择类表单。Form UI 提供与WeLink规范一致的表单视图。

效果示例

import React from 'react';
import {
  ActionSheet,
  Form, FormCell, FormHeader, FormBody, FormLayout, FormExplan 
} from '@wecode/react-weui';
const _marginTop = { marginTop: 30 };
export default class FormAccess extends React.Component {
  state ={
    menus: [
      { label: '选择文本1', onClick: ()=>this.handleMenusClick('选择文本1') },
      { label: '选择文本2', onClick: ()=>this.handleMenusClick('选择文本2') },
      { label: '选择文本3', onClick: ()=>this.handleMenusClick('选择文本3') },
      { label: '选择文本4', onClick: ()=>this.handleMenusClick('选择文本4') },
      { label: '选择文本5', onClick: ()=>this.handleMenusClick('选择文本5') }
    ],
    actions: [
      {
        label: '取消',
        onClick: () => this.setState({ isShow: false })
      }
    ]
  };

  onAccessClick = (code) => {
    this.setState({ isShow: true, code });
  }

  handleMenusClick = (value) => {
    const { code } = this.state;
    this.setState({ [code]: value, isShow: false });
  }

  render() {
    const { 
      menus, isShow, actions,
      conenct1, conenct2, conenct3, conenct4, conenct5,
      conenct6, conenct7
    } = this.state;
    return (
      <section>
        <Form form>
          <FormCell form access>
            <FormHeader>标题</FormHeader>
            <FormBody placeholder="请选择" access beRight onClick={()=>this.onAccessClick('conenct1')}>
              {conenct1}
            </FormBody>
          </FormCell>
        </Form>
        <Form style={_marginTop} form>
          <FormCell form access line>
            <FormHeader>标题</FormHeader>
            <FormBody placeholder="请选择" access beRight onClick={()=>this.onAccessClick('conenct2')}>
              {conenct2}
            </FormBody>
          </FormCell>
          <FormCell form access>
            <FormHeader>纯展示标题</FormHeader>
            <FormBody access beRight onClick={()=>this.onAccessClick('conenct3')}>{conenct3}</FormBody>
          </FormCell>
        </Form>
        <Form style={_marginTop} form>
          <FormCell form access explan>
            <FormLayout>
              <FormHeader>标题</FormHeader>
              <FormBody placeholder="请选择" access beRight onClick={()=>this.onAccessClick('conenct4')}>{conenct4}</FormBody>
            </FormLayout>
            <FormExplan>
                辅助文本说明，辅助文本说明辅助文本说明辅助文本说明
            </FormExplan>
          </FormCell>
        </Form>
        <Form style={_marginTop} form>
          <FormCell form access explan>
            <FormLayout>
              <FormHeader>标题</FormHeader>
              <FormBody placeholder="请选择" access beRight onClick={()=>this.onAccessClick('conenct5')}>{conenct5}</FormBody>
            </FormLayout>
            <FormExplan>
              辅助文本说明，辅助文本说明辅助文本说明辅助文本说明
              辅助文本说明，辅助文本说明辅助文本说明辅助文本说明
              辅助文本说明，辅助文本说明辅助文本说明辅助文本说明
              辅助文本说明，辅助文本说明辅助文本说明辅助文本说明
            </FormExplan>
          </FormCell>
        </Form>
        <Form style={_marginTop} form>
          <FormCell form verticality access explan>
            <FormHeader>标题</FormHeader>
            <FormBody placeholder="请选择" access onClick={()=>this.onAccessClick('conenct6')}>{conenct6}</FormBody>
          </FormCell>
        </Form>
        <Form style={_marginTop} form>
          <FormCell form verticality access explan>
            <FormHeader>标题</FormHeader>
            <FormBody placeholder="请选择" access onClick={()=>this.onAccessClick('conenct7')}>
              {conenct7}
            </FormBody>
            <FormExplan>
              辅助文本说明，辅助文本说明辅助文本说明辅助文本说明
              辅助文本说明，辅助文本说明辅助文本说明辅助文本说明
              辅助文本说明，辅助文本说明辅助文本说明辅助文本说明
              辅助文本说明，辅助文本说明辅助文本说明辅助文本说明
            </FormExplan>
          </FormCell>
        </Form>
        <ActionSheet
          menus={menus}
          actions={actions}
          show={isShow}
          onRequestClose={e => this.setState({ isShow: false })}
        />
      </section>
    );
  }
}