onClick setState 不是函数

Question

首先，我查看了其他答案，但没有帮助。

我有一个在 onClose 函数道具中传递的模态。单击取消按钮时，它应该触发 onClose 函数，该函数基本上将 showModal 状态设置为 false。但是，单击按钮后出现错误，提示 onClose 不是函数。

我已经检查了 onClose 道具的类型及其作为对象返回。不知道为什么。

这就是我从父级调用模态框的方式。

<Modal
   onClose={() => this.setState((prevState) => ({
      showModal: {
         ...prevState.showModal,
         confirmation: false,
        },
    }))}

/>

这就是模态的样子。

const Modal = (onClose) => {
  return (
    <div className="Background" >
      <div className="Container">
        <div className="Title">Title of the modal</div>
        <div className="Body">Body of the modal</div>
        <div className="Footer">
          <button type="button" onClick={() => onClose()}>Cancel</button>
        </div>
      </div>
    </div>
  );
};

这是来自控制台的错误。

Answer 1

更改此行

const Modal = (onClose) => {

至

const Modal = ({onClose}) => {

Answer 2

//be sure this is being used in a class component! (not a functional) 
export YourClassComponent extends React.ClassComponent {
    constructor(props) {
      super(props);
      this.onCloseModal = this.onCloseModal.bind(this);
    }

    onCloseModal = () => {
      this.setState((prevState) => ({ 
        showModal: {
          ...prevState.showModal,
          confirmation: false,
      }}))
    };

    render() {
      <Modal onClose={this.onCloseModal} />
    };
};
    // In you Modal.jsx, see the prop is setted directly no need to create a new ref to call it
const Modal = ({ onClose }) => {
  return (
    <div className="Background" >
      <div className="Container">
        <div className="Title">Title of the modal</div>
        <div className="Body">Body of the modal</div>
        <div className="Footer">
          <button type="button" onClick={onClose}>Cancel</button>
        </div>
      </div>
    </div>
  );
};

onClick setState 不是函数

onClick setState is not a function

javascript

state

modal-dialog

onclick

reactjs