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

const isAndroid = true;

let md = {
  Core:{
    'color-brand1-1': '#00BBD3',
    'color-brand1-6': '#1A9CB7',
    'color-brand1-9': '#0096A6',
    'color-error-3':  '#D50000',
    'color-line1-1': '#DADADA',
    'color-line1-2': '#E0E0E0',
    'color-text1-1': '#9E9E9E',
    ['font-size-title'] : 40,
    ['font-size-subhead'] : 32,
    ['font-size-body-3']: 28,
    ['font-size-body-2']: 28,
    ['font-size-body-1']: 28,
    ['font-size-caption']: 24,
    ['font-size-footnote']: 20,
  }

};

let App = class NukeDemoIndex extends Component {
    constructor() {
        super();
        this.state={
          value:'111'
        }
        this.input = this.input.bind(this);
        this.clear = this.clear.bind(this);
        this.change = this.change.bind(this);

    }
    change(text){
      this.setState({
        value:text
      })
      console.log('change');

    }
    input(e){
      console.log(e);
      this.setState({
        value:e.value
      })
      console.log('input');
    }
    clear(){
      this.setState({
        value:''
      })
      console.log('clear')

    }
    getValue(){
      return this.input.wrappedInstance.getValue();
    }
    
    render() {
      const {value} = this.state;
      return (
        <StyleProvider style={md} commonConfigs={{fixedFont:true}} androidConfigs={{materialDesign:true}}>
          <Page title="single md">

           

            <Page.Intro main="error, always show until it's OK"></Page.Intro>
            <View style={styles.demoBlock}>
              <Input 
              ref={(n)=>{this.input=n;}}
              hasClear={true} 
              hideErrorWhenFocus={false} 
              value={value} 
              onInput={this.input} 
              onChange={this.change} 
              onClear={this.clear} 
              status={this.state.status3} 
              type="text" 
              placeholder="Enter Voucher Code" 
              errorMessage={'Voucher code error'} 
              autoAdjustHeight={true} 
              />
            </View>
            
            

            
          </Page>
          </StyleProvider>


      );
    }
}
const styles = {
  demoBlock:{
    marginLeft:40,
    marginRight:40
  }
}
render(<App/>);



````