我正在学习 React.Js。我正在尝试附加一个事件以在控制台中写一些东西,但是我无法触发我的函数。有谁知道我如何将 onClick 事件附加到 react div?如果这是一个基本问题,我深表歉意,但我尝试了几种不同的方法,但都没有奏效。
我已经尝试了两种触发功能的方法,但都不起作用。
因此,我意识到事件不起作用的原因是因为我正在渲染服务器端。如果我在客户端呈现然后事件触发。如果我最初在服务器上呈现,有人知道如何触发它吗?
class Individual extends React.Component {
handleClick = () => {
alert("GREAT");
}
render() {
const indDiv = {
margin: '5px',
width: '100px',
height: '120px',
cursor: 'pointer',
border: '5px solid pink',
color: 'blue',
float: 'left'
};
return (
<div>
<div onClick={this.handleClick.bind(this)}>
Alert 1
</div>
<div onClick={() => this.handleClick}>
Alert 2
</div>
<div style={indDiv}>
{this.props.num}. {this.props.name}.
</div>
</div>
);
}
}
感谢为此做出贡献的所有人。在我发现一切之后,因为我最初将其创建为服务器呈现的片段,所以我必须在页面呈现后附加事件。我使用的是 ReactJS.Net,必须使用 hydrate 单独初始化它。
最佳答案
您的代码中两种调用处理函数的方式都不正确。
在您的代码中,handleClick 是一个箭头函数,因此不需要手动绑定(bind)。
如果它不是箭头函数,那么手动绑定(bind)应该只在构造函数中完成。永远不要像在渲染中那样在其他任何地方进行绑定(bind)。
当您使用 onClick={() => this.handleClick} 时,这是错误的。应该是onClick={()=> this.handleClick()}。如果没有 Paranthesis 那么这是正确的 onClick={this.handleClick}
所以改变
<div onClick={this.handleClick.bind(this)}>
Alert 1
</div>
<div onClick={() => this.handleClick}>
Alert 2
</div>
到
<div onClick={()=> this.handleClick()}>
Alert 1
</div>
<div onClick={() => this.handleClick()}>
Alert 2
</div>
除了构造函数之外你不应该在组件中的任何其他地方进行绑定(bind)的原因是因为例如你直接在渲染中绑定(bind)所以在这种情况下发生的是它在每次组件渲染和重新渲染时在 webpack bundle 文件中创建一个新函数再次因此捆绑文件变大。因此建议只在构造函数中绑定(bind)它
关于javascript - 将点击事件添加到 React.Js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54067923/