Question

我正在构建一个React计算器，并且试图创建一个可以处理所有计算操作的点击处理程序事件。编译时不断出现错误。我已经尝试了一切，但似乎无法解决。我认为我在类内部绑定了错误的方法，但是我不确定（“按钮”是一个不同的功能组件）。

应用程序类

class Calculator extends Component {
  constructor(props) {
    super(props);
    this.state = {value: []}

 }
render() {
    return(
            <div id="container">
                <Display id="display" value={this.state.value} />
                <Button onClick={handleClick} id="zero" value={'0'} />
                <Button onClick={handleClick} id="one" value={'1'} />
                <Button onClick={handleClick} id="two" value={'2'}/>
                <Button onClick={handleClick} id="three" value={'3'} />
                <Button onClick={handleClick} id="four" value={'4'} />
                <Button onClick={handleClick} id="five" value={'5'} />
                <Button onClick={handleClick} id="six" value={'6'} />
                <Button onClick={handleClick} id="seven" value={'7'} />
                <Button onClick={handleClick} id="eight" value={'8'}  />
                <Button onClick={handleClick} id="nine" value={'9'} />
                <Button onClick={handleClick} id="decimal" value={'.'} />
                <Button onClick={handleClick} id="equals" value={'='} />
                <Button onClick={handleClick} id="clear" value={'clear'}  />
                <Button onClick={handleClick} id="add" value={'+'} />
                <Button onClick={handleClick} id="subtract" value={'-'} />
                <Button onClick={handleClick} id="multiply" value={'*'} />
                <Button onClick={handleClick} id="divide" value={'/'} />
            </div>
)

}
}
export default Calculator;

按钮类

import React, { Component } from 'react';
const Button = (props) => {
  return (
         <input type="button" value={props.value}/>

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


  handleClick(event){
 const answer = event.target.id; 
 if(answer==="clear") {
        this.setState({value:[]})
      }
}




export default Button;

Answer 1

handleClick未在Caculator类中定义...

您可能仍希望将其从button.js移至Calculator.js，因为它正在设置计算器的状态。

Answer 2

希望这会有所帮助

class Calculator extends Component {
  constructor(props) {
    super(props);
    this.state = {value: []}

 }
 
 handleClick = () => {
  // do whatever you want to do here
  }

render() {
    return(
            <div id="container">
                <Display id="display" value={this.state.value} />
                <Button onClick={this.handleClick} id="zero" value={'0'} />
                <Button onClick={this.handleClick} id="one" value={'1'} />
                <Button onClick={this.handleClick} id="two" value={'2'}/>
                <Button onClick={this.handleClick} id="three" value={'3'} />
                <Button onClick={this.handleClick} id="four" value={'4'} />
                <Button onClick={this.handleClick} id="five" value={'5'} />
                <Button onClick={this.handleClick} id="six" value={'6'} />
                <Button onClick={this.handleClick} id="seven" value={'7'} />
                <Button onClick={this.handleClick} id="eight" value={'8'}  />
                <Button onClick={this.handleClick} id="nine" value={'9'} />
                <Button onClick={this.handleClick} id="decimal" value={'.'} />
                <Button onClick={this.handleClick} id="equals" value={'='} />
                <Button onClick={this.handleClick} id="clear" value={'clear'}  />
                <Button onClick={this.handleClick} id="add" value={'+'} />
                <Button onClick={this.handleClick} id="subtract" value={'-'} />
                <Button onClick={this.handleClick} id="multiply" value={'*'} />
                <Button onClick={this.handleClick} id="divide" value={'/'} />
            </div>
)

}
}
export default Calculator;

Answer 3

不是代码而是实际错误。我对您遇到的问题感到非常困惑...

反应类方法

3 个答案: