# Button Demo

- order: 1


Button 事件，包含 press , longpress

---

````js

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


let App = class NukeDemoIndex extends Component {
    constructor() {
        super();
        this.state={
            pressTimes : 0,
            disabled:true
        }
           
    }
    press(){
        this.setState({
            pressTimes : this.state.pressTimes + 1,
            disabled: !(this.state.pressTimes>9  )
        });
    }
    
    render() {
        return (
            <Page title="Button">

                <Page.Intro main="press"></Page.Intro>
                <View style={styles.result}>
                    {this.state.pressTimes ? <Text style={styles.resultText}>点击了 {this.state.pressTimes} 次</Text> :null}
                </View>
                <View style={styles.btns}>
                    <Button  onPress={() => this.press()} type="primary"> press 事件</Button>
                </View>
                <Button disabled={this.state.disabled} onPress={() => alert(1234)} type="primary"> 测试</Button>
                

            </Page>

        );
    }
}
const styles = {
    result: {
        height:'120rem',
        margin:'30rem',
        padding:'10rem',
        backgroundColor:'#ffffff',
        justifyContent:'center',
        alignItems:'center'
    },
    resultLine : {
        height:'80rem',
        marginLeft:'30rem',
        flexDirection:'row',
        backgroundColor:'#ffffff',
        // justifyContent:'center',
        alignItems:'center'
    },
    resultLabel : {
        fontSize:'24rem',
        width:'200rem',
        color:'#999999'
    },
    resultText : {
        fontSize:'28rem'
    },
    btns:{
        margin:'30rem',
    }
}
render(<App/>);



````