Javascript react mobile以按钮打开，但不是可单击的组件

希望这是非常简单的，但我似乎什么也做不到

我有一个简单的组件，我在其中加载了react-responsive模式，并创建了一个简单的模式，单击即可打开

问题是，当我单击button元素时，它会很好地打开。但是，当我单击一个调用完全相同的“打开”函数的组件时，它什么也不做。控制台中甚至没有错误

当我点击MiniCardComponent时，如何打开此模式

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} active={this.props.selectedItem === 'Medical Journal'}  className={css(styles.miniCardContainer)} title="Medical Journal" value= <FaBookMedical /> />

                        <button onClick={this.onOpenModal}>Open modal</button>

                        <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>
        );
  }
}

类MedJournalComponent扩展了React.Component{ 状态={ 开放：假 }; onOpenModal=（）=>{ this.setState（{open:true}）； }; onCloseModal=（）=>{ this.setState（{open:false}）； }; render（）{ const{open}=this.state； 返回( 开放模态 单中心模态 洛雷姆·伊普苏姆·多洛·希特·阿梅特（Lorem ipsum dolor sit amet）是一位杰出的献身者 pulvinar risus non risus hendrerit venenatis.佩伦特斯克坐在阿梅特 亨德雷特·里苏斯，塞德·波特·奎姆。

); } }

---

抽象反应组件不能很好地处理事件处理程序。事件处理程序通常需要附加到DOM元素。例如，如果

MiniCardComponent

如下所示：

const MiniCardComponent=（）=>(
是的
不
也许
)

如何知道将onclick连接到哪个按钮？您需要深入研究

MiniCardComponent

组件，并确定要在哪个DOM元素上触发onClick。然后可以将onClick作为道具传递：

const MiniCardComponent=props=>(
是的
不
也许
)

我不知道如何应用它，因为我的miniCardComponent看起来是这样的：

函数miniCardComponent（{className=''，title，value}）{const composedClassName=`${css（styles.container）}${className}；return（{title}{value}）}

从哪里来？我想说，这将是附加eventhandler的地方，但我不确定这到底是渲染什么。如果在

元素中的一个或两个元素上单击

onClick

，它将起作用。您也可以在

上试用，看看它是否粘在一起。