在官方的 React 教程中,他们首先编写类组件:
class Square extends React.Component {
render() {
return (
<button className="square" onClick={() => this.props.onClick()}>
{this.props.value}
</button>
);
}
}
然后让它成为一个函数组件
function Square(props) {
return (
<button className="square" onClick={props.onClick}>
{props.value}
</button>
);
}
为什么需要更改 onClick,即为什么我们要删除箭头功能?
在第一种情况下,当我们删除箭头函数时,即只保留 this.props.onClick() ,每次方形渲染时都会发生事件,甚至没有单击按钮,为什么会这样? ps:我是 React js 的新手,在学习教程时遇到了这些疑问,如果您能给出详尽的答案以及任何可以提供帮助的进一步资源,那就太好了!!提前致谢。
最佳答案
我猜你做了下面的事情?
又名,改变了
class Square extends React.Component {
render() {
return (
<button className="square" onClick={() => this.props.onClick()}>
{this.props.value}
</button>
);
}
}
^ 那个,到
class Square extends React.Component {
render() {
return (
<button className="square" onClick={this.props.onClick()}>
{this.props.value}
</button>
);
}
}
^这个
如果是这样,您基本上就是在每次呈现组件时调用 this.props.onClick()
。然后,this.props.onClick()
的返回值 将被设置为 onClick 值。这在您希望执行与 onClick 事件相关的代码然后返回处理实际 onClick 事件的函数时非常有用。
要复制与第二个示例相同的内容,只需执行即可。
class Square extends React.Component {
render() {
return (
<button className="square" onClick={this.props.onClick}>
{this.props.value}
</button>
);
}
}
由于 this.props.onClick
函数被分配给 onClick
prop 未被调用。
基本函数调用解释
function onClickHandler() {
console.log('I WAS CLICKED!'):
}
function callThis() {
return onClickHandler;
}
var assignedOnClick = callThis(); < Calls callThis which returns onClickHandler (without calling it)
var alsoAssignedOnClick = onClickHandler;
alsoAssignedOnClick(); < Calls onClickHandler which has just been assigned to the alsoAssignedOnClick variable
提示不要过度考虑 React 或一般编码。几乎所有的编码都只是从 A 到 B 获取数据,其中最困难的部分是尽可能减少数据/调用堆栈。
关于javascript - onClick 从类更改为函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67922733/