代码之家 › 专栏 › 技术社区 › Geoff_S

将onCLick传递给导入的组件,react

react.js reactjs javascript

Geoff_S · 技术社区 · 6 年前

我有下面两个组件的代码。其中一个(medjournalcomponent.js)是本例中的父级。这是一个包含名为minicard的元素的页面,它是我导入的minicardcomponent.js

迷你卡显示得很好,但我的问题是,在单击迷你卡组件时,我无法让一次单击为我的模式代码工作。

我仍然做错了什么,我如何才能使它,以便点击导入的MiniCardComponent将打开模式?

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

3 回复 | 直到 6 年前

Nick Kinlen 6 年前

对代码进行了一些编辑,并使onClick处理程序在子组件中工作。 Check out this Code Sandbox

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

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

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

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

同时去掉了子组件中的道具分解。看起来您只需要父组件中的函数括号,而不需要子组件中的函数括号。

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

Patrissol Kenfack 6 年前

主要问题是您的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;

iamhuynq 6 年前

你只需要 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>