promise-waiting

Demo

这个组件主要是用于防止点击事件被触发多次。它主要利用Promise，所以onClick的监听函数必须返回一个Promise对象。

当按钮被点击后，会设置按钮的disabled为true，只有Promise函数返回后再设置disabled为false

Install

npm i promise-waiting

Usage

只支持一个Children节点

import {render} from 'react-dom'

import PromiseWaiting from 'promise-waiting'

class Demo extends Component {
  render() {
    return <div >
      <h1>promise-waiting Demo</h1>
      <p>Normal</p>
      <PromiseWaiting >
        <button onClick={this.handlOnClick.bind(this)}>Click Me</button>
      </PromiseWaiting>
      <p>Use receiveState</p>
      <PromiseWaiting receiveState='loading'>
        <button type='primary' onClick={this.handlOnClick.bind(this)}>Click Me</button>
      </PromiseWaiting>
    </div>
  }
  handlOnClick(){ 
      //must return a Promise object
     return new Promise((resolve)=>{
       setTimeout(() => {
         resolve();
       }, 2000);
     })
  }
}
render(<Demo/>, document.querySelector('#demo'))

Props

receiveState : 子组件用于接收状态的props名称。这个特性主要是为了实现某些组件有自己的loading状态的功能，比如下面这个组件Button Component 就有一个loading状态。

for example

<PromiseWaiting receiveState='loading'>
    <Button  onClick={this.handlOnClick.bind(this)}>Click Me</Button>
</PromiseWaiting>

上面的代码中，在运行时Button会收到一个多余的prop，比如这样 <Button loading={true/flase} ...props />