javascript - 如何从 ReactJS 组件中删除 'onClick' 属性？

Question

我刚刚开始使用 NodeJS 和 ReactJS。有些东西我不太清楚。

render( ) {
return (
  <div>
    <img src={this.props.pic}
         onclick={this.props.cb()}
         class="af1" />
  </div>
 );
}

上面是我的 App 组件的渲染方法。我想在第一次点击图像后删除 onClick 属性，并禁用图像(无法再次单击)10秒左右(如果有更好的方法暂时禁用图像点击，请建议我)。这是一个好的解决方案吗？

为什么我在 Chrome 的开发者控制台中看不到 onclick attrib？我真的开始喜欢学习这些东西，但我迷失了方向。

Answer 1

class App extend React.Component{
    constructor(props){
        super(props);
        this.onImageClick = this.onImageClick.bind(this);
        this.timeDelay= this.timeDelay.bind(this);
    }

    onImageClick(...args){
        // do something
    }

    timeDelay(func, delay){
        var isCalled = false;
        return (args)=>{
           if (!isCalled){
               isCalled = true;
               func(event);
               setTimeout(()=>{
                  isCalled = false;
               }, delay)
           }
        }
    }

    componentWillMount(){
        this.onImageClickWithTimeDelay = this.timeDelay(this.onImageClick, 10000);
    }

    render(){
        return <div>
            <img src={this.props.pic} onClick={ this.onImageClickWithTimeDelay }/>
        </div>
    }
}

希望这对您有用。