weex-nuke/docs/button/demo/disabled.md

基于 Rax 、Weex 的高性能组件体系 ~~

# Button Demo

- order: 1
Button 事件，包含 press , longpress

---

````js
/** @jsx createElement */
import { View, Text, Button, Page, Env } from 'weex-nuke';
const { isWeb } = Env;
import {createElement, Component,render } from 'rax';
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/>);
````