# 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-normal-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 => {
    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 />);
```