Input

表单输入框。Input UI 提供与WeLink规范一致的视图。 Input类型包括：文本框、复选框、单选框、文本域。

参数说明

Input

参数 类型 默认值 说明
defaultValue string - 初始值
type string - 定义 input 元素的类型，有效值：text
disabled bool false 是否禁用
placeholder string - 输入字段预期值的提示信息
value string - 与onChange事件配合使用，通过设置状态改变显示值
onChange func - 文本值改变时触发

TextArea

参数 类型 默认值 说明
defaultValue string - 初始值
maxLength number - 文本域允许输入的最大字符数
placeholder string - 输入字段预期值的提示信息
showCounter bool true 是否展示计数
onChange func - 文本域值改变时触发

效果示例

HTML
import React from 'react';
import {
  CellsTitle,
  CellBody,
  CellFooter,
  Form,
  FormCell,
  Icon,
  Input,
  TextArea
} from '@wecode/react-weui';

export default class inputDemo extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      inputText1: '',
      inputText2: '这是初始化文本内容'
    };
  }

  clearInputValue(key, value) {
    const data = {};
    data[key] = value;
    this.setState(data);
  }

  render() {
    const { inputText1, inputText2 } = this.state;
    return (
      <section>
        <CellsTitle>文本框</CellsTitle>
        <Form>
          <FormCell>
            <CellBody>
              <Input
                type="text"
                placeholder="请输入文本"
                value={inputText1}
                onChange={e => this.setState({ inputText1: e.target.value })}
              />
            </CellBody>
            {inputText1 && (
              <CellFooter>
                <Icon value="clear" onClick={e => this.clearInputValue('inputText1', '')} />
              </CellFooter>
            )}
          </FormCell>
        </Form>
        <Form>
          <FormCell>
            <CellBody>
              <Input
                type="text"
                placeholder="请输入文本"
                value={inputText2}
                onChange={e => this.setState({ inputText2: e.target.value })}
              />
            </CellBody>
            {inputText2 && (
              <CellFooter>
                <Icon value="clear" onClick={e => this.clearInputValue('inputText2', '')} />
              </CellFooter>
            )}
          </FormCell>
        </Form>
        <CellsTitle>文本域</CellsTitle>
        <Form>
          <FormCell>
            <CellBody>
              <TextArea placeholder="Enter your comments" rows="3" maxLength="200" />
            </CellBody>
          </FormCell>
        </Form>
      </section>
    );
  }
}

result. ""

    Not Found. ""