示例

务必先阅读 intro 后查看示例。

// Start debugging
localStorage.debug = 'react-spread-props'

proxyEvent

最常见的基于代理事件自定义事件

代理点击事件

点击按钮时候触发 onChange, 通过 onChange 递增数字。

import React , { Component } from "react"
import spreadProps from "react-spread-props"
import message from "face-message"
class Button extends Component {
    render() {
        const self = this
        let domProps = spreadProps(
            self.props,
            {
                onClick: () => {
                    self.props.onChange()
                }
            }
        )
        return (
            <button {...domProps} >{self.props.value}</button>
        )
    }
}
class Example extends Component {
    constructor (props) {
        super(props)
        const self = this
        self.state = {
            count: 0
        }
    }
    render() {
        const self = this
        return (
            <Button
                value={self.state.count}
                onChange={() => {
                    self.setState({
                        count: self.state.count + 1
                    })
                }}
                onClick={() => {
                    message.info('clicked')
                }}
            />
        )
    }
}

import ReactDOM from "react-dom"
ReactDOM.render(
    <Example />,
    document.getElementById('onClick-demo')
)

style&className

合并 style 和 className

.btn {
    border:1px solid skyblue;
}
.btn--big {
    font-size: 2em;
}

合并 style 和 className

import React , { Component } from "react"
import spreadProps from "react-spread-props"
class Button extends Component {
    render() {
        const self = this
        let domProps = spreadProps(
            self.props,
            {
                style: {
                    backgroundColor: '#abcdef'
                },
                className: 'btn'
            }
        )
        return (
            <button {...domProps} />
        )
    }
}
class Example extends Component {
    render() {
        const self = this
        return (
            <div>
                <Button>default</Button>
                <hr/>
                <Button
                    style={{color: 'purple'}}
                >
                style: color: purple
                </Button>
                <hr/>
                <Button
                    className="btn--big"
                >
                className: btn--big
                </Button>
            </div>
        )
    }
}

import ReactDOM from "react-dom"
ReactDOM.render(
    <Example />,
    document.getElementById('styleClassName-demo')
)

stopTrigger

在代理事件中控制用户绑定事件触发条件

Loadding button

loading 为 true 时 onClick 不会触发

import React , { Component } from "react"
import spreadProps from "react-spread-props"
import message from "face-message"
class Button extends Component {
    render() {
        const self = this
        let domProps = spreadProps(
            self.props,
            {
                onClick: function() {
                    const command = this
                    if (self.props.loading) {
                        command.stopTrigger()
                    }
                }
            }
        )
        return (
            <button {...domProps} />
        )
    }
}
class Example extends Component {
    render() {
        const self = this
        return (
            <div>
                <Button
                    loading={false}
                    onClick={() => {
                        message.info('点击了第一个按钮')
                    }}
                >click</Button>
                <hr/>
                <Button
                    loading={true}
                    onClick={() => {
                        message.info('点击事件不会触发')
                    }}
                >loading</Button>
            </div>
        )
    }
}

import ReactDOM from "react-dom"
ReactDOM.render(
    <Example />,
    document.getElementById('loadingbutton-demo')
)