javascript - 在React中实现事件处理程序

我只是最近才开始在React中进行编码，我需要一些帮助。我正在构建一个简单的计算器，并且试图将事件处理程序传递给子组件。在应用程序流程中，App组件是父组件。它包含一个“按钮面板”子组件，而该子组件又包含“按钮”子组件，如下所示：

import React from 'react';
import Display from './display';
import ButtonPanel from './button-panel';
import method from '../logic/calculate';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      total: null,
      next: null,
      operation: null,
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(buttonName) {
    // Updates this.state based on buttonName
  }

  render() {
    const { total } = this.state;
    return (
      <div id="app">
        <Display result={total} />
        <ButtonPanel onClick={this.handleClick} />
      </div>
    );
  }
}

export default App;

------------------------------------------------------------------------------------------------

import React from 'react';
import PropTypes from 'prop-types';
import Button from './button';

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

  passInfo(buttonName) {
    const { handleClick } = this.props;
    handleClick(buttonName);
  }

  render() {
    return (
      <div>
        <div className="panel-row">
          <Button name="AC" color="white" onClick={this.passInfo} />
          <Button name="+/-" color="white" onClick={this.passInfo} />
          <Button name="%" color="white" onClick={this.passInfo} />
          <Button name="/" onClick={this.passInfo} />
        </div>
        <div className="panel-row">
          <Button name="7" color="white" onClick={this.passInfo} />
          <Button name="8" color="white" onClick={this.passInfo} />
          <Button name="9" color="white" onClick={this.passInfo} />
          <Button name="X" />
        </div>
        <div className="panel-row">
          <Button name="4" color="white" onClick={this.passInfo} />
          <Button name="5" color="white" onClick={this.passInfo} />
          <Button name="6" color="white" onClick={this.passInfo} />
          <Button name="-" onClick={this.passInfo} />
        </div>
        <div className="panel-row">
          <Button name="1" color="white" onClick={this.passInfo} />
          <Button name="2" color="white" onClick={this.passInfo} />
          <Button name="3" color="white" onClick={this.passInfo} />
          <Button name="+" />
        </div>
        <div className="panel-row">
          <Button name="0" color="white" wide onClick={this.passInfo} />
          <Button name="." color="white" onClick={this.passInfo} />
          <Button name="=" onClick={this.passInfo} />
        </div>
      </div>
    );
  }
}

ButtonPanel.propTypes = {
  handleClick: PropTypes.func.isRequired,
};

export default ButtonPanel;

------------------------------------------------------------------------------------------------

import React from 'react';
import PropTypes from 'prop-types';

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

  namePass(e) {
    const { name } = e.target;
    const { handleClick } = this.props;
    handleClick(name);
  }

  render() {
    const { name, color, wide } = this.props;
    const classes = color === 'white' && wide ? 'white wide' : color;
    return (
      <div
        className={classes}
        onClick={this.namePass}
        onKeyPress={this.namePass}
        role="button"
        tabIndex="-1"
      >
        {name}
      </div>
    );
  }
}

Button.propTypes = {
  name: PropTypes.string.isRequired,
  color: PropTypes.string,
  wide: PropTypes.bool,
  handleClick: PropTypes.func.isRequired,
};
Button.defaultProps = {
  color: 'orange',
  wide: false,
};

export default Button;

（请原谅硬编码，我正在尝试在重构之前使一切正常工作）。

目前，我遇到以下错误：

1）“警告：道具类型失败：道具handleClick在ButtonPanel中标记为必需，但在ButtonPanel中其值为undefined

2）“警告：道具类型失败：道具handleClick在Button中标记为必需，但在Button中其值为undefined

在解决这个问题的任何帮助将不胜感激。

最佳答案

将原型中的handleClick更改为onClick或将onClick重命名为handleClick。

该警告来自Proptypes。期望这两个自定义组件都使用handleClick属性，但是您使用的是onClick。

我会选择后者，因为onClick通常是许多元素的默认道具。

ButtonPanel.propTypes = {
  onClick: PropTypes.func.isRequired,
};

Button.propTypes = {
  onClick: PropTypes.func.isRequired,
  ...
};

要么

<ButtonPanel handleClick={this.handleClick} />
<Button handleClick={this.handleClick} ..... />

关于javascript - 在React中实现事件处理程序，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60231951/