反应剥离出来的onclick

我有以下阵营组成：反应剥离出来的onclick

class PlayerRow extends Component { 
    activateKey(){ 
     $(this).addClass('active') 
} 
render() { 

    return (
       <div className="row-par"> 
        <div className="details-cont"> 
        </div> 
        <div className="key-cont"> 
         <div onClick={this.activateKey} className="key"></div> 
         <div onClick={this.activateKey} className="key"></div> 
         <div onClick={this.activateKey} className="key"></div> 
        </div> 
       </div> 
     ) 

} 
}

我想在嵌套的div上的点击执行功能activateKey但每当我呈现出来的应用我的onclick属性被剥离的所有divs。为什么会这样？

来源

2017-02-09 red house 87

在onclick属性应该在DOM中没有任何理由。检查时动态附着的听众不一定可见。点击处理程序的工作？代码是否正在运行？尝试点击其中一个div。请注意'activateKey'可能需要'.bind（this）'。 React和jQuery的结合也不是我的建议 – slezica

为什么你不鼓励在React上使用jQuery？此外为什么反应剥离onclick，它不会从正常的HTML剥离？ –

React接管DOM的处理。如果你触摸DOM，你可能会与React竞争，而React将会获胜。它会随心所欲地去除，添加和修改DOM元素，可能会覆盖您的更改。如果你打算使用React，最安全的方法是学习让jQuery去。这个例子（'onclick'属性“dissappearing”）只是其中许多方法中的一种，React将DOM抽象出去 – slezica

React绑定事件侦听器本身，所以onClick不会直接导致DOM中的onclick属性。但是，您的代码实际上工作（请参阅代码段）。

class PlayerRow extends React.Component { 
 
    activateKey() { 
 
     console.log('ddd') 
 
} 
 
render() { 
 

 
    return (
 
       <div className="row-par"> 
 
        <div className="details-cont"> 
 
        </div> 
 
        <div className="key-cont"> 
 
         <div onClick={this.activateKey} className="key">asd</div> 
 
         <div onClick={this.activateKey} className="key">qwe</div> 
 
         <div onClick={this.activateKey} className="key">zxc</div> 
 
        </div> 
 
       </div> 
 
     ) 
 

 
} 
 
} 
 

 
ReactDOM.render(
 
    <PlayerRow/>, 
 
    document.getElementById('container') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="container"> 
 
    <!-- This element's contents will be replaced with your component. --> 
 
</div>

我建议两件事虽然，使用.bind(this)采取行动处理程序，甚至更好，使用箭头的功能，因为它在默认情况下继承范围。

从反应文档：

handleClick =() => { 
    console.log('this is:', this); 
}

见：https://facebook.github.io/react/docs/handling-events.html

第二件事 - 不要使用jQuery。您正在使用React来管理DOM，并且jQuery默认会产生副作用，所以它会影响反应的工作方式。 React根据组件的状态或道具自动渲染你的视图，并且它的优化非常棒，jQuery不会编辑道具和状态，所以你不会利用任何反应的很酷的东西。

对于你想达到的目标，你可以给你的动作处理器一个参数，告诉你哪个块已被点击onClick={() => activateKey(1)}。在处理程序中，将活动ID保存在本地状态中，并根据其ID是否与密钥ID匹配来有条件地给予块。这是我的想法。

来源

2017-02-09 21:48:56

很好解释清楚。谢谢 –

在render方法中使用ES6箭头函数或.bind（）会给组件添加不必要的开销。你真的应该.bind（这个）你在构造方法类似这样：

import React, { Component } from "react"; 

export default class Demo extends Component { 
    constructor(props) { 
     super(props); 

     this.activateKey = this.activateKey.bind(this); 
    } 

    activateKey() { 
     console.log("ddd"); 
    } 

    render() { 

     return (
      <div className="row-par"> 
       <div className="details-cont"></div> 
       <div className="key-cont"> 
        <div onClick={this.activateKey} className="key">asd</div> 
        <div onClick={this.activateKey} className="key">qwe</div> 
        <div onClick={this.activateKey} className="key">zxc</div> 
        </div> 
       </div> 
     ); 
    } 
}

如果你这样做，绑定操作仅每一次的方法在类的初始化阶段进行。如果在渲染方法中使用ES6箭头函数或.bind（this等等），则将在每次重新渲染时从每个具有onClick事件的元素执行绑定。

在render方法中，唯一一次应该使用.bind（this等等）或ES6箭头函数的情况是，如果您需要传递除click事件以外的其他内容给函数。

来源

2017-04-15 04:14:34

反应剥离出来的onclick

回答

相关问题