开放平台

开发

Form（文本域）

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

参数说明

InputItem

名称	类型	默认值	说明
type	string		规定 input 元素的类型
disabled	bool	false	是否禁用
placeholder	string		可描述输入字段预期值的提示信息
value	string		可配和onChange事件，通过设置状态改变显示值
onChange	func		文本值改变时触发

效果示例

HTML

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>
    );
  }
}

result. ""

Not Found. ""