Input

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

参数说明

Input

TextArea

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