# Input Demo

- order: 4
- hide:true

clear 按钮测试

---

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

let App = class Demo extends Component {
  constructor() {
    super();
    this.state = {
      content: '',
      max: 10,
      placeholderText: 'Please enter account number'
    };
  }

  handleClear = (value) => {
    console.log('handleClear: ' + value);
  };

  handleChange = (value) => {
    console.log('handleChange: ' + value);
    return true;
  };

  render() {
    return (
      <Page title="Input">
        <Page.Intro main="Bug: Enter some text, while caret is still at it, tap/click on the clear icon. What happen: onChange is triggered with last value, but onClear is not trigger, and the input is not clear." />
        <View style={styles.lineWithMargin}>
          <Input
            ref="myinput"
            maxLength={this.state.max}
            placeholder={this.state.placeholderText}
            style={{ height: 60, marginBottom: '20rem' }}
            id="first"
            hasClear={true}
            onClear={this.handleClear}
            onChange={this.handleChange}
          />
        </View>
      </Page>
    );
  }
};
const styles = {
  lineWithMargin: {
    marginLeft: 30,
    marginRight: 30
  },
  textLine: {
    marginTop: 20,
    marginBottom: 40
  },
  text: {
    fontSize: 26
  }
};
render(<App />);
```