weex-nuke/docs/input/demo/single.md

基于 Rax 、Weex 的高性能组件体系 ~~

# Input Demo

- order: 4

单行 非 md 模式

---

```js
/** @jsx createElement */
import { View, Text, Input, Page, Button, Env, ThemeProvider } from 'weex-nuke';
const { isWeb, appInfo } = Env;
const { StyleProvider } = ThemeProvider;
import { createElement, Component, render } from 'rax';
const isAndroid = true;

let md = {
  Core: {
    'color-brand1-1': '#00BBD3',
    'color-brand1-6': '#1A9CB7',
    'color-brand1-9': '#0096A6',
    'color-error-3': '#D50000',
    'color-line1-1': '#DADADA',
    'color-line1-2': '#E0E0E0',
    'color-text1-1': '#9E9E9E',
    ['font-size-title']: 40,
    ['font-size-subhead']: 32,
    ['font-size-body-3']: 28,
    ['font-size-body-2']: 28,
    ['font-size-body-1']: 28,
    ['font-size-caption']: 24,
    ['font-size-footnote']: 20
  }
};

let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      status1: 'error',
      status2: 'error',
      status3: 'error',
      value: '111'
    };
    this.checkLength = this.checkLength.bind(this);
    this.checkLengthOnInput = this.checkLengthOnInput.bind(this);
    this.change = this.change.bind(this);
    this.onIconPress = this.onIconPress.bind(this);
  }
  change() {
    this.setState({
      status1: 'success'
    });
  }
  onIconPress() {
    alert('icon pressed');
  }
  checkLength(text) {
    let length = text.length;
    // this.setState({value:text});
  }
  checkLengthOnInput(e) {
    let text = e.value;
    let length = text.length;
    if (length > 10) {
      this.setState({ status3: 'success' });
      console.log('success');
    }
  }

  render() {
    return (
      <StyleProvider style={md} commonConfigs={{ fixedFont: true }} androidConfigs={{ materialDesign: true }}>
        <Page title="single">
          <Page.Intro main="Enter Voucher" />
          <View style={styles.demoBlock}>
            <Input materialDesign={false} hasClear={true} type="text" placeholder="Ender Voucher Code" />
          </View>

          <Page.Intro main="blur ,show error" />
          <View style={styles.demoBlock}>
            <Input
              materialDesign={false}
              hasClear={true}
              defaultValue={'WATSON$7189833'}
              onInput={this.checkLength}
              status={this.state.status1}
              type="text"
              onChange={this.change}
              placeholder="Enter Voucher Code"
              errorMessage={
                'ยังไมีนี้ให้ลูอื่ห็ยังไมีนี้ให้ลูอื่ห็ยังไมีนี้ให้ลูอื่ห็ยังไมีนี้ให้ลูอื่ห็ยังไมีนี้ให้ลูอื่ห็ยังไมีนี้ให้ลูอื่ห็'
              }
            />
          </View>
          <Page.Intro main="maxLength,keep error when input,until success" />
          <View style={styles.demoBlock}>
            <Input
              materialDesign={false}
              renderCount={true}
              maxLength={10}
              hasClear={true}
              defaultValue={'WATSON833'}
              onInput={this.checkLength}
              type="text"
              placeholder="Enter Voucher Code"
            />
          </View>
          <Page.Intro main="add style" />
          <View style={styles.demoBlock}>
            <Input
              style={{ width: 300 }}
              materialDesign={false}
              renderCount={true}
              maxLength={10}
              hasClear={true}
              defaultValue={'WATSON833'}
              onInput={this.checkLength}
              type="text"
              placeholder="Enter Voucher Code"
            />
          </View>
          <Page.Intro main="add style" />
          <View style={styles.demoBlock}>
            <Input
              style={{ width: 300, height: 122 }}
              materialDesign={false}
              renderCount={true}
              maxLength={10}
              hasClear={true}
              defaultValue={'WATSON833'}
              onInput={this.checkLength}
              type="text"
              placeholder="Enter Voucher Code"
            />
          </View>

          <Page.Intro main="add icon" />
          <View style={styles.demoBlock}>
            <Input
              style={{ width: 300, height: 102 }}
              materialDesign={false}
              renderCount={true}
              maxLength={10}
              icon={{
                uri: 'https://img.alicdn.com/tfs/TB1YG58h3vD8KJjy0FlXXagBFXa-36-36.png',
                onPress: (e) => {
                  alert('icon Pressed');
                }
              }}
              defaultValue={'WATSON833'}
              onInput={this.checkLength}
              type="text"
              placeholder="Enter Voucher Code"
            />
          </View>
        </Page>
      </StyleProvider>
    );
  }
};
const styles = {
  demoBlock: {
    marginLeft: 40,
    marginRight: 40
  }
};
render(<App />);
```