将 onCLick 传递给导入的组件，做出反应

Question

我有以下两个组件的代码。 在这种情况下，一个 (medjournalcomponent.js) 是父级。 这是一个页面，其中包含一个名为 minicard 的元素，这是我导入的 minicardcomponent.js

minicard 显示正常，但我的问题是，就单击 minicard 组件而言，我无法让 onclick 为我的模态代码工作。

我试图将它传递给组件，以便在 MiniCardComponent 中的 Column 元素上的任何点击都会打开模态，但它不起作用。 我会收到错误消息“无法读取未定义的 onCLick 属性”

我仍然做错了什么，我该如何做到这一点，以便单击导入的 MiniCardComponent 将打开模态？

MiniCardComponent.js

function MiniCardComponent({ props, onClick, className = '', title, value }) {
const composedClassName = `${css(styles.container)} ${className}`;
return (
    <Column onClick={() => props.onClick}  flexGrow={1} className={composedClassName} horizontal="center" vertical="center">
        <span className={css(styles.title)}>{title}</span>
        <span className={css(styles.value)}>{value}</span>
    </Column>
);
}

export default MiniCardComponent;

MedJournalComponent.js

class MedJournalComponent extends React.Component {

      state = {
        open: false
      };

      onOpenModal = () => {
        this.setState({ open: true });
      };

      onCloseModal = () => {
        this.setState({ open: false });
      };

    render() {
        const { open } = this.state;
        return (
            <Column>

                <Row className={css(styles.cardsContainer)} wrap flexGrow={1} horizontal="space-between" breakpoints={{ 768: 'column' }}>
                    <Row className={css(styles.cardRow)} wrap flexGrow={1} horizontal="space-between" breakpoints={{ 384: 'column' }}>

                        <MiniCardComponent onClick={() => this.onOpenModal} className={css(styles.miniCardContainer)} title="Medical Journal" value= <FaBookMedical /> />

                        <Modal open={open} onClose={this.onCloseModal}>
                          <h2>Simple centered modal</h2>
                          <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
                            pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet
                            hendrerit risus, sed porttitor quam.
                          </p>
                        </Modal>
                    </Row>
                </Row>
            </Column>
        );
  }
}

Answer 1

对您的代码进行了一些编辑，并在子组件中使用了一个 onClick 处理程序。 查看此代码沙盒。

将父组件中的 onClick 处理程序更改为：

<MiniCardComponent onClick={() => this.onOpenModal()}/>

并将子组件更改为这样调用它作为示例：

<button onClick={props.onClick}>Click me</button>

还摆脱了子组件中的道具解构。 看起来您只需要父组件中的函数括号而不是子组件中的函数括号。

此外，您在父组件中缺少构造函数。 不确定这是否也影响了这一点。

Answer 2

主要问题是您的 MiniCardComponent 签名错误。 还要考虑执行函数和将函数设置为参数之间的区别

所以应该这样做：

function MiniCardComponent({ onClick, className = '', title, value, ...props }) {
const composedClassName = `${css(styles.container)} ${className}`;
return (
    <Column onClick={() => onClick()}  flexGrow={1} className={composedClassName} horizontal="center" vertical="center">
        <span className={css(styles.title)}>{title}</span>
        <span className={css(styles.value)}>{value}</span>
    </Column>
);
}

export default MiniCardComponent;

Answer 3

你只需要onClick ，而不是props.onClick

<Column onClick={onClick}  flexGrow={1} className={composedClassName} horizontal="center" vertical="center">
        <span className={css(styles.title)}>{title}</span>
        <span className={css(styles.value)}>{value}</span>
</Column>