gpt4 book ai didi

javascript - 为什么 React 告诉我 this.handleClick 不是一个函数?

转载 作者:行者123 更新时间:2023-12-02 02:55:03 24 4
gpt4 key购买 nike

我正在使用 React 创建一个简单的计算器,并且尝试向按钮添加 onClick 函数。我在 tictactoe 游戏中使用了 React 教程中使用的相同技术,但是当我单击任何按钮时,我只会收到以下错误消息:

Uncaught TypeError: this.handleClick is not a function
at onClick (index.js:71)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
at invokeGuardedCallback (react-dom.development.js:292)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306)
at executeDispatch (react-dom.development.js:389)
at executeDispatchesInOrder (react-dom.development.js:414)
at executeDispatchesAndRelease (react-dom.development.js:3278)
at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287)
at forEachAccumulated (react-dom.development.js:3259)
at runEventsInBatch (react-dom.development.js:3304)
at runExtractedPluginEventsInBatch (react-dom.development.js:3514)
at handleTopLevel (react-dom.development.js:3558)
at batchedEventUpdates$1 (react-dom.development.js:21871)
at batchedEventUpdates (react-dom.development.js:795)
at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568)
at attemptToDispatchEvent (react-dom.development.js:4267)
at dispatchEvent (react-dom.development.js:4189)
at unstable_runWithPriority (scheduler.development.js:653)
at runWithPriority$1 (react-dom.development.js:11039)
at discreteUpdates$1 (react-dom.development.js:21887)
at discreteUpdates (react-dom.development.js:806)
at dispatchDiscreteEvent (react-dom.development.js:4168)

我的代码如下:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class Screen extends React.Component {
render() {
return (
<p>99+10</p>
);
}
}

class Operators extends React.Component {
render() {
return (
<div>
{this.props.renderButton('+')}
{this.props.renderButton('-')}
{this.props.renderButton('x')}
{this.props.renderButton('/')}
</div>
);
}
}

class Numbers extends React.Component {
render() {
return (
<div>
<div className="nums-row">
{this.props.renderButton(1)}
{this.props.renderButton(2)}
{this.props.renderButton(3)}
</div>
<div className="nums-row">
{this.props.renderButton(4)}
{this.props.renderButton(5)}
{this.props.renderButton(6)}
</div>
<div className="nums-row">
{this.props.renderButton(7)}
{this.props.renderButton(8)}
{this.props.renderButton(9)}
</div>
<div className="nums-row">
{this.props.renderButton('.')}
{this.props.renderButton(0)}
{this.props.renderButton('=')}
</div>
</div>
);
}
}

function CalculatorButton(props) {
return (
<button onClick={props.onClick} >
{props.text}
</button>
);
}

class Calculator extends React.Component {
handleClick(text) {
console.log(text);
}

renderButton(text) {
return (
<CalculatorButton
onClick= {() => this.handleClick(text)}
text={text}
/>
);
}

render() {
return (
<div className="calculator-container">
<div className="calculator">
<div className="screen">
<Screen />
</div>
<div className="buttons">
<div className="numbers">
<Numbers renderButton={this.renderButton} />
</div>
<div className="operators">
<Operators renderButton={this.renderButton} />
</div>
</div>
</div>
</div>
);
}
}

ReactDOM.render(
<Calculator />,
document.getElementById('root')
);

这是界面图片,这样可能更容易理解我在问题开头所说的内容。

app UI

提前感谢您的帮助。

最佳答案

您需要将 renderButton 函数绑定(bind)到 Calculator 组件实例。

这可以通过多种方式完成:

#1. 在构造函数中:

class Calculator extends React.Component {
constructor(props) {
super(props);
this.renderButton = this.renderButton.bind(this);
}

/* ... */
}

#2. 在渲染中:

<Numbers renderButton={this.renderButton.bind(this)} />

#3. 或将 renderButton 方法更改为箭头函数:

renderButton = (text) => {
/* ... */
}

更多详细信息以及一些优点和缺点可以在 React faq section on functions 中找到。 。

关于javascript - 为什么 React 告诉我 this.handleClick 不是一个函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61294749/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com