Input 文本框

基本用法

import { Input, Cell } from 'zarm';
class Demo extends React.Component {
  state = {
    inputValue: '',
  };
  handleInputChange = (value) => {
    this.setState({
      inputValue: value,
    });
  }
  render() {
    return (
      <>
        <Cell title="单行文本">
          <Input
            clearable
            type="text"
            placeholder="请输入"
            value={this.state.inputValue}
            onChange={this.handleInputChange}
          />
        </Cell>
        <Cell title="多行文本"><Input type="text" rows={3} placeholder="请输入" /></Cell>
      </>
    )
  }
}
ReactDOM.render(<Demo />, mountNode);

输入类型

import { Input, Cell, Button } from 'zarm';
class Demo extends React.Component {
  state = {
    focused: false,
    number: '',
  };
  render() {
    return (
      <>
        <Cell title="数字">
          <Input
            ref={(ref) => { this.manualFocus = ref; }}
            type="number"
            placeholder="type is number"
            value={this.state.number}
            focused={this.state.focused}
            onFocus={value => console.log(`onFocus: ${value}`)}
            onBlur={value => console.log(`onBlur: ${value}`)}
            onChange={value => console.log(`onChange: ${value}`)}
          />
        </Cell>
        <Cell title="金额">
          <Input type="price" placeholder="type is price" />
        </Cell>
        <Cell title="身份证">
          <Input type="idcard" placeholder="type is idcard" />
        </Cell>
        <Cell>
          <Button size="xs" theme="primary" onClick={() => this.manualFocus.focus()}>click to focus the first input</Button>
        </Cell>
      </>
    )
  }
}
ReactDOM.render(<Demo />, mountNode);

只读 / 禁用状态

import { Input, Cell } from 'zarm';
ReactDOM.render(
  <>
    <Cell title="单行文本">
      <Input readOnly type="text" defaultValue="我是只读状态" />
    </Cell>
    <Cell title="单行文本">
      <Input disabled type="text" value="我是禁用状态" />
    </Cell>
    <Cell title="多行文本">
      <Input readOnly type="text" rows={3} value="我是只读状态，我是只读状态，我是只读状态，我是只读状态。" />
    </Cell>
    <Cell title="多行文本">
      <Input disabled type="text" rows={3} value="我是禁用状态，我是禁用状态，我是禁用状态，我是禁用状态。" />
    </Cell>
  </>
, mountNode);

高度自适应

import { Input, Cell } from 'zarm';
ReactDOM.render(
  <Cell title="多行文本">
    <Input autoHeight type="text" rows={3} placeholder="写点啥..." />
  </Cell>
, mountNode);

无标签栏

import { Input, Cell } from 'zarm';
ReactDOM.render(
  <>
    <Cell><Input type="text" placeholder="标题" /></Cell>
    <Cell><Input autoHeight type="text" rows={4} maxLength={200} placeholder="摘要" /></Cell>
  </>
, mountNode);

显示输入字数

import { Input, Cell } from 'zarm';
ReactDOM.render(
  <Cell>
    <Input
      autoHeight
      showLength
      type="text"
      rows={4}
      maxLength={200}
      placeholder="摘要"
    />
  </Cell>
, mountNode);

API