Form（文本域）

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

参数说明

InputItem

import React from 'react';
import {
  CellBody, TextArea, Tags,
  Form, FormCell, FormHeader,
  FormItem, InputItem
} from '@wecode/react-weui';

const _marginTop = { marginTop: 30 };
export default class FormWrite extends React.Component {

  state={
    value: '',
    text1: '',
    text2: ''
  }

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

  render() {
    const { value, text1, text2 } = this.state;
    return (
      <section>
        <Form form>
          <FormItem>
            <InputItem type="text" placeholder="请输入" value={value} onChange={text=>this.handleChangeValue('value', text)} />
          </FormItem>
        </Form>

        <Form style={_marginTop} form>
          <FormItem>
            <FormHeader label>标题</FormHeader>
            <FormCell>
              <CellBody>
                <TextArea placeholder="Enter your comments" rows="3" showCounter maxLength={300} />
              </CellBody>
            </FormCell>
          </FormItem>
        </Form>

        <Form style={_marginTop} form>
          <FormItem>
            <FormCell>
              <CellBody>
                <TextArea placeholder="Enter your comments" rows="3" showCounter maxLength={300} />
              </CellBody>
            </FormCell>
          </FormItem>
        </Form>

        <Form style={_marginTop} form>
          <FormItem>
            <FormHeader label>标题</FormHeader>
            <Tags
              tags={['常用', '常用', '常用三', '常用四字', '常用五个字']}
              onChange={(e, text)=>{
                const value = text1 + text;
                if (value.length <= 300) {
                  this.handleChangeValue('text1', value);                       
                }
              }}
            />
            <FormCell>
              <CellBody>
                <TextArea
                  placeholder="Enter your comments"
                  rows="3"
                  showCounter
                  maxLength={300}
                  value={text1}
                  onChange={(e)=>{
                    const text = e.target.value;
                    if (text.length <= 300) {
                      this.handleChangeValue('text1', text);                       
                    }
                  }}
                />
              </CellBody>
            </FormCell>
          </FormItem>
        </Form>

        <Form style={_marginTop} form>
          <FormItem>
            <Tags
              tags={['常用', '常用', '常用三', '常用四字', '常用五个字']}
              onChange={(e, text)=>{
                const value = text2 + text;
                if (value.length <= 300) {
                  this.handleChangeValue('text2', value);                       
                }
              }}
            />
            <FormCell>
              <CellBody>
                <TextArea
                  placeholder="Enter your comments"
                  rows="3"
                  showCounter
                  maxLength={300}
                  value={text2}
                  onChange={(e)=>{
                    const text = e.target.value;
                    if (text.length <= 300) {
                      this.handleChangeValue('text2', text);                       
                    }
                  }}
                />
              </CellBody>
            </FormCell>
          </FormItem>
        </Form>
      </section>
    );
  }
}