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

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

# 包含单行和多行文本输入，return key 等

- order: 0
- title_en: Input usage

---

```js
/** @jsx createElement */
import { View, Text, Input, Button, Page } from 'weex-nuke';

<NukePlayGround>
  // single
  <Input defaultValue="hello nuke" style={{ height: 60 }} />
  // multiple
  <Input style={{ height: 300, marginBottom: 20 }} rows={20} multiple={true} placeholder="multiple" />
</NukePlayGround>
```

---

```js

import { createElement, Component, findDOMNode, render } from 'rax';
let App = class Demo extends Component {
  constructor() {
    super();
    this.state = {
      content: '',
      max: 10,
      placeholderText: 'aaa'
    };
  }
  getvalue = (e) => {
    console.log(this.refs.myinput.wrappedInstance.getValue());
  };
  getRef = (e) => {
    if (findDOMNode(this.refs.myinput.wrappedInstance.getRef())) {
      console.log('find it');
    }
  };
  componentDidMount() {
    setTimeout(() => {
      this.setState({
        placeholderText: 'bbb',
        max: 20
      });
    }, 2000);
  }
  render() {
    return (
      <Page title="Input">
        <Page.Intro main="基础样式" />
        <View style={styles.lineWithMargin}>
          <Input
            ref="myinput"
            maxLength={this.state.max}
            placeholder={this.state.placeholderText}
            style={{ height: 60, marginBottom: '20rem' }}
            id="first"
          />
        </View>
        <View style={styles.btns}>
          <Button style={styles.btn} block type="primary" onPress={this.getvalue}>
            获得值
          </Button>
          <Button style={styles.btn} block type="primary" onPress={this.getRef}>
            获得input
          </Button>
        </View>
        <Page.Intro main="多行" />
        <View style={styles.lineWithMargin}>
          <Input
            style={{ height: 300, marginBottom: 20 }}
            rows={20}
            maxLength={100}
            multiple={true}
            id="third"
            placeholder="多行文本：说点什么吧"
          />
        </View>
        <Page.Intro main="自定义样式" />
        <View style={styles.lineWithMargin}>
          <Input
            id="fourth"
            style={{
              borderWidth: 0,
              height: 40,
              backgroundColor: '#3089dc',
              color: '#ffffff'
            }}
            inputStyle={{ padding: 0 }}
          />
        </View>

        <Page.Intro main="不可修改" />
        <View style={[styles.lineWithMargin, { marginBottom: '10rem' }]}>
          <Input disabled id="fiveth" value="不可修改" />
        </View>
      </Page>
    );
  }
};
const styles = {
  lineWithMargin: {
    marginLeft: 30,
    marginRight: 30
  },
  textLine: {
    marginTop: 20,
    marginBottom: 40
  },
  text: {
    fontSize: 26
  }
};
render(<App />);
```