# 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 Icon from 'nuke-icon';
import Env from 'nuke-env';
const {isWeex} = Env;
import Button from 'nuke-button';
import Page from 'nuke-page';

let App = class NukeDemoIndex extends Component {
    constructor() {
        super();

        this.state = {
            value1:'',
        }
    }    

    change = (value,e) => {

        // 设置一遍 value1
        this.setState({value1:value});

        if(value.length > 5 ){
            value = value.substring(0,5);
            this.setState({ value1 : value })

        }
    }
    input = (e) => {
        // console.log(e);
    }
    numberOnly = (e)=>{
        let value = isWeex ? e.value : e.target.value;
        // 设置一遍 value2
        this.setState({ value2 : value });

        // 过滤数字
        let newVal = value.replace(/\D/g,'');

        if(newVal !== value){
            // 过滤后需要再设置 value2
            this.setState({ value2 : newVal})
            console.log('value2',this.state.value2)

        }
    }
    setValue= (e)=>{
        let value = isWeex ? e.value : e.target.value;
        // 设置一遍 value2
        this.setState({ value3 : value });

    }
    clear= (e)=>{
        let value = isWeex ? e.value : e.target.value;
        // 设置一遍 value2
        this.setState({ value3 : value });
        this.setState({ value3 : '' });

    }
    render() {
        return (
            <Page title="Input">
                <Page.Intro main="onChange 配合验证字数" sub="超出5个字就截断"></Page.Intro>
                    <Input ref="myinput" value={this.state.value1} onInput={this.input} onChange={this.change}/>
                <View style={[styles.lineWithMargin,styles.textLine]}>
                    <Text style={styles.text}>用户输入：{this.state.value1}</Text>
                </View>
                <Page.Intro main="onInput 配合验证合法性" sub="只能输入数字"></Page.Intro>
                    <Input ref="myinput" value={this.state.value2} onInput={this.numberOnly} onChange={(value,e)=>this.numberOnly(e)}/>
                <View style={[styles.lineWithMargin,styles.textLine]}>
                    <Text style={styles.text}>用户输入：{this.state.value2}</Text>
                </View>

                <Page.Intro main="清除按钮"></Page.Intro>
                <View style={styles.clearInputWrap}>
                    <Input ref="myinput" value={this.state.value3} onChange={(value,e)=>this.setValue(e)}/>
                
                    <Icon onClick={this.clear} name="close"></Icon>
                </View>
                
            </Page>

        );
    }
}
const styles={
    lineWithMargin:{
        marginLeft:'30rem',
        marginRight:'30rem',

    },
    textLine:{
        marginTop:'20rem',
        marginBottom:'40rem',
    },
    text:{
        fontSize:'26rem'
    },
    btns:{
        margin:'30rem',
    },
    btn:{
        marginBottom:'30rem'
    },
    clearInputWrap:{
        marginLeft:'30rem',
        marginRight:'30rem',
        flexDirection:'row',
        justifyContent:'center',
        borderWidth:1,
        borderStyle:'solid',
        borderColor:'yellow'
    },
    input:{
        borderWidth:0,
        borderStyle:'solid',
        borderColor:'yellow'
    }
    
}

render(<App/>);

````