# Input demo

- order: 2

自动获得焦点、强制获取或失去焦点

---

````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:'',
      value:'',
    }
  }
  focus = (e) => {
    this.refs.myinput.wrappedInstance.focus();
  }
  blur = (e) => {
    this.refs.myinput.wrappedInstance.blur();
  }
  change = (value) => {
    this.setState({value:value})
  }
  input = (e) => {
    this.setState({input:e.value})
  }
  return = (e) => {
  }
  render() {
    return (
      <Page title="Input">
        <Page.Intro main="autoFocus"></Page.Intro>
        <View style={styles.lineWithMargin}>
          <Input autoFocus preventEnterKey onReturn={this.return} returnKeyType="done" ref="myinput" onInput={this.input} onChange={this.change}/>
        </View>
        <View style={[styles.lineWithMargin,styles.textLine]}>
          <Text style={styles.text}>用户输入：{this.state.value}</Text>
        </View>
        <View style={[styles.lineWithMargin,styles.textLine]}>
            <Text style={styles.text}>onInput:{this.state.input}</Text>
        </View>
        <View style={styles.btns}>
          <Button style={styles.btn} block type="primary" onPress={this.focus}>获得焦点</Button>
          <Button style={styles.btn} block type="primary" onPress={this.blur}>失去焦点</Button>
        </View>
      </Page>
    );
  }
}
const styles={
  lineWithMargin:{
    marginLeft:30,
    marginRight:30,
  },
  textLine:{
    marginTop:20,
    marginBottom:40,
  },
  text:{
    fontSize:26
  },
  btns:{
    margin:30,
  },
  btn:{
    marginBottom:30
  }
}
render(<App/>);

````