# Input demo

- order: 3

input events

---

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

let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      input: '',
      change: '',
      returnKeyType: '',
      returnValue: ''
    };
  }
  input = (e) => {
    let text = e.value;
    this.setState({
      input: text
    });
  };
  textareaInputHandler = (e) => {
    let text = e.value;
    this.setState({
      textareainput: text
    });
  };
  change = (text) => {
    this.setState({
      change: text
    });
  };
  onReturnHandler = (e) => {
    console.log(e.type);
    this.setState({
      returnKeyType: e.returnKeyType,
      returnValue: e.value
    });
    console.log('in onReturnHandler');
  };
  blur = (e) => {
    this.refs.myinput.wrappedInstance.blur();
  };
  render() {
    return (
      <Page title="Input">
        <Page.Intro main="onChange 事件" />
        <View style={styles.lineWithMargin}>
          <Input ref="myinput" placeholder="输入完成点击按钮失去焦点" onChange={this.change} />
        </View>
        <View style={[styles.lineWithMargin, styles.textLine]}>
          <Text style={styles.text}>
            onChange：
            {this.state.change}
          </Text>

          <Button style={styles.btn} block type="primary" onPress={this.blur}>
            onChange 在失去焦点后触发
          </Button>
        </View>
        <Page.Intro main="onInput 事件" />
        <View style={styles.lineWithMargin}>
          <Input onInput={this.input} />
        </View>
        <View style={[styles.lineWithMargin, styles.textLine]}>
          <Text style={styles.text}>
            onInput：
            {this.state.input}
          </Text>
        </View>

        <Page.Intro main="onInput  textarea事件" />
        <View style={styles.lineWithMargin}>
          <Input multiple onInput={this.textareaInputHandler} />
        </View>
        <View style={[styles.lineWithMargin, styles.textLine]}>
          <Text style={styles.text}>
            onInput：
            {this.state.textareainput}
          </Text>
        </View>

        <Page.Intro main="return key" />
        <View style={styles.lineWithMargin}>
          <Input placeholder="go" id="sixth" returnKeyType="go" onReturn={this.onReturnHandler} />
        </View>
        <View style={[styles.lineWithMargin, styles.textLine]}>
          <Text style={styles.text}>
            return 类型： {this.state.returnKeyType} , 输入框值： {this.state.returnValue}
          </Text>
        </View>
      </Page>
    );
  }
};
const styles = {
  lineWithMargin: {
    marginLeft: 30,
    marginRight: 30
  },
  textLine: {
    marginTop: 20,
    marginBottom: 20
  },
  text: {
    fontSize: 26
  },
  btn: {
    marginTop: 20
  }
};
render(<App />);
```