# Input demo

* order: 0

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

---

```js
/** @jsx createElement */
import { createElement, Component, findDOMNode, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Input from 'nuke-normal-input';
import Button from 'nuke-button';
import Page from 'nuke-page';

let App = class Demo extends Component {
  constructor() {
    super();
    this.state = {
      content: ''
    };
  }
  getvalue = e => {
    console.log(this.refs.myinput.wrappedInstance.getValue());
  };
  getRef = e => {
    if (findDOMNode(this.refs.myinput.wrappedInstance.getRef())) {
      console.log('find it');
    }
  };
  render() {
    return (
      <Page title="Input">
        <Page.Intro main="基础样式" />
        <View style={styles.lineWithMargin}>
          <Input
            ref="myinput"
            maxLength={10}
            style={{marginBottom: '20rem' }}
            defaultValue="今年流行"
            id="first"
          />
        </View>
        <View style={styles.btns}>
          <Button
            style={styles.btn}
            block
            type="primary"
            onPress={this.getvalue}
          >
            获得值
          </Button>
        </View>
        <Page.Intro main="多行" />
        <View style={styles.lineWithMargin}>
          <Input
            style={{ height: '300rem', marginBottom: '20rem' }}
            rows={20}
            maxLength={10}
            multiple={true}
            id="third"
            placeholder="多行文本：说点什么吧"
          />
        </View>
        <Page.Intro main="自定义样式" />
        <View style={styles.lineWithMargin}>
          <Input
            id="fourth"
            defaultValue="customize"
            style={{
              borderWidth: 0,
              borderRadius:30,
              paddingLeft:30,
              paddingRight:30,
              height: 60,
              backgroundColor: '#FF9671',
              color: '#ffffff'
            }}
            inputStyle={{ padding: 0 ,height: 60,lineHeight:60}}
          />
        </View>

        <Page.Intro main="disabled" />
        <View style={[styles.lineWithMargin, { marginBottom: '10rem' }]}>
          <Input disabled id="fiveth" value="hi disabled" />
        </View>
        <Page.Intro main="clear" />
        <View style={[styles.lineWithMargin, { marginBottom: '10rem' }]}>
          <Input placeholder="has clear button when not empty" hasClear />
        </View>
      </Page>
    );
  }
};
const styles = {
  lineWithMargin: {
    marginLeft: 30,
    marginRight: 30
  },
  textLine: {
    marginTop: 20,
    marginBottom: 40
  },
  text: {
    fontSize: 26
  }
};
render(<App />);
```