# Input Demo

* order: 4

多行文本 md 定制

---

```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 Button from 'nuke-button';
import Page from 'nuke-page';
import { isWeb, appInfo } from 'nuke-env';
import { StyleProvider } from 'nuke-theme-provider';

let md = {
  Core: {
    [`color-brand1-1`]: '#00BBD3',
    [`color-brand1-6`]: '#1A9CB7',
    [`color-brand1-9`]: '#0096A6',
    [`color-error-3`]: '#D50000'
  }
};

let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      status1: 'error',
      value: '',
      changevalue: ''
    };
    this.input = this.input.bind(this);
    this.change = this.change.bind(this);
    this.getValue = this.getValue.bind(this);
  }

  input(e) {
    this.setState({ value: e.value });
  }
  change(value) {
    this.setState({ changevalue: value });
  }
  getValue() {
    alert(this.refs.textarea.wrappedInstance.getValue());
  }

  render() {
    return (
      <StyleProvider
        style={md}
        commonConfigs={{ fixedFont: true }}
        androidConfigs={{ materialDesign: true }}
      >
        <Page title="Textareas ">
          <Page.Intro main="maxRows 3" />
          <View style={styles.demoBlock}>
            <Input
              multiple
              ref="textarea"
              floatPlaceholder={false}
              maxRows={3}
              maxLength={250}
              onInput={this.input}
              onChange={this.change}
              renderCount={true}
              type="text"
              status="error"
              placeholder="ยังไมีนี้ให้ลูอื่ห็"
              errorMessage="errorxxx"
            />
          </View>
          <Text>输入的值：{this.state.value}</Text>
          <Text>输入的值：{this.state.changevalue}</Text>

          <Page.Intro main="error" />
          <View style={styles.demoBlock}>
            <Input
              multiple
              maxRows={8}
              renderCount
              maxLength={250}
              onInput={this.checkLength}
              renderCount={false}
              errorMessage="error"
              renderError={true}
              renderClear={true}
              type="text"
              status={this.state.status2}
              placeholder="ยังไมีนี้ให้ลูอื่ห็"
            />
          </View>
        </Page>
      </StyleProvider>
    );
  }
};
const styles = {
  demoBlock: {
    marginLeft: 30,
    marginRight: 30
  }
};
render(<App />);
```