weex-nuke/src/node_modules/nuke-input/docs/autofocus.md

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

# 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" />
        <View style={styles.lineWithMargin}>
          <Input
            autoFocus
            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 />);
```