如何从 ReactJS 组件中删除“onClick”属性？答案

【问题标题】：How do i remove 'onClick' attribute from a ReactJS Component?如何从 ReactJS 组件中删除“onClick”属性？
【发布时间】：2017-12-05 11:35:40
【问题描述】：

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

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

以上是我对App 组件的渲染方法。我想在第一次单击图像后删除onClick 属性并禁用图像（not able to click again）10 秒左右（如果有更好的方法可以暂时禁用单击图像，请建议我）。这会是一个好的解决方案吗？

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

【问题讨论】：

标签： javascript jquery node.js reactjs babeljs

【解决方案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>
    }
}

我希望这对你有用。

【讨论】：

你能简单解释一下吗？我不太明白 timeDelay 方法和构造函数中发生了什么。
$('#btndisable').prop('disabled', true); setTimeout(()=>{ $('#btndisable').prop('disabled', false); },10000)_如果只有button_我用这个怎么样？ @瓦西
timeDelay 方法有两个参数。 func 表示你的函数，delay 表示阻塞函数调用的时间。如果您使用正确的参数调用 timeDelay 函数，它将返回一个函数。你把这个函数放在你想要的地方。返回函数有一个检查（isCalled），检查决定是否调用你的函数。您的延迟时间稍后会切换检查。所以你在延迟时间结束后调用你的函数，函数就会调用。
如果你的元素是一个按钮，你可以使用按钮禁用方法。否则你就用我的方法了。
当我第二次点击图片时。 isCalled 不会再次设置为 false 吗？每次点击都会出现这个循环？