Passing a function to React Component and then calling it causes "Uncaught TypeError: x is not a function"

Question

我正在尝试在 React 中显示 Modal，一旦调用 onClose，它就会自行关闭。我有一个名为 showModal():

的函数

  showModal = () => {
    this.setState(prev=>({
      modalOpen: !prev.modalOpen
    }));
  };

我在构造函数中绑定它：

  constructor(props) {
    super(props);
    this.state = {
      ...
      modalOpen: false,
    };
    this.showModal = this.showModal.bind(this);
  }

有时我会调用我的 Modal 组件 :

function = () => {
    ...
    return (
          <div {...attrs}>
            ...
              <div>
                <DocumentModal onClose={this.showModal} show={this.state.modalOpen} document = {documents[0].id} />
                <button onClick={() => {this.showModal()}}>{click me} &raquo;</button>
              </div>
              }
            </div>
          </div>
        );
}

这里是 Modal 组件：

class DocumentModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      id: this.props.document,
    };
  }

  ...

  render() {
    const modalStyles = {
      modal: {
        minWidth: '400px',
        padding: '2rem',
      }
    };

    if (!this.props.show) {
      return null;
    }

    return (
      <div>
        <Modal open={this.props.show} little showCloseIcon={true} styles={modalStyles}>
          <div className="item">
            ...
            <button type="button" className="close" aria-label="Close"
                    onClick={() => {this.props.onClose()}}/>
          </div>
        </Modal>
      </div>
    );
  }
}

Modal.propTypes = {
  onClose: PropTypes.func.isRequired,
  show: PropTypes.bool,
  document: PropTypes.string,
};

export default DocumentModal;

单击 Modal 中的 close 按钮时出现以下错误：

Uncaught TypeError: n.props.onClose is not a function
    at n.onClickCloseIcon (modal.js:66)
    at Object.c (react-dom.production.min.js:26)
    at Object.invokeGuardedCallback (react-dom.production.min.js:25)
    at Object.invokeGuardedCallbackAndCatchFirstError (react-dom.production.min.js:25)
    at p (react-dom.production.min.js:30)
    at b (react-dom.production.min.js:32)
    at y (react-dom.production.min.js:32)
    at Array.forEach (<anonymous>)
    at v (react-dom.production.min.js:31)
    at S (react-dom.production.min.js:34)

可能值得一提的是，有多个项目呈现 Modal。例如 5 个不同的项目有 5 个不同的 ID's 但 onClose 方法对每个人来说仍然是相同的。

我做错了什么？

Answer 1

您必须在模态组件中添加 onClose

<Modal open={this.props.show} little showCloseIcon={true} styles={modalStyles} onClose={this.props.onModalClose}> //rename your prop function to onModalClose//

Passing a function to React Component and then calling it causes "Uncaught TypeError: x is not a function"

Passing a function to React Component and then calling it causes "Uncaught TypeError: x is not a function"

javascript

function

modal-dialog

reactjs

react-props