如何让一个按钮单击 React 中不同组件的另一个按钮

Question

我是新来的反应，有点难以理解数据流的单向方式，我正在制作一个简单的应用程序，我正在使用 mdbootstrap 来制作一些现成的引导组件，我导入了模态组件（单击它时有一个按钮切换模式）所以在我的应用程序中我有卡片，每个卡片都有一个应该切换按钮的按钮，但我不知道如何将卡片的按钮与 mdbootstrap 组件的按钮链接。

卡片组件：

import React, { Component } from 'react';
import ModalPage from './modal.jsx'


class Card extends Component {

    render() {
        return (
            <div>
                <div className="card m-5" style={{ width: '18rem' }}>
                    <img src={this.props.img} className="card-img-top" />
                    <div className="card-body">
                        <h5 className="card-title">{this.props.title}</h5>
                        <p className="card-text">{this.props.desc}</p>
                        <button onClick={/*I don't know what exactly i should put here */}></button>
                    </div>
                </div>
            </div>
        )
    }
}

export default Card;

模态组件：

import React, { Component } from 'react';
import { MDBContainer, MDBBtn, MDBModal, MDBModalBody, MDBModalHeader, MDBModalFooter } from 'mdbreact';

class ModalPage extends Component {
    state = {
        modal13: false
    }

    toggle = nr => () => {
        let modalNumber = 'modal' + nr
        this.setState({
            [modalNumber]: !this.state[modalNumber]
        });
    }

    render() {
        return (

                <MDBContainer>

                    {/* This is the button I want to click when clicking the card's button */}
                    <MDBBtn color="primary" onClick={this.toggle(13)}>
                        Modal
                    </MDBBtn>


                    <MDBModal isOpen={this.state.modal13} toggle={this.toggle(13)}>
                        <MDBModalHeader toggle={this.toggle(13)}>
                            {this.props.title}
                        </MDBModalHeader>
                        <MDBModalBody>
                            {/* edit here */}
                            {this.props.content}
                        </MDBModalBody>
                        <MDBModalFooter>
                            <MDBBtn color="secondary" onClick={this.toggle(13)}>
                                Close
                            </MDBBtn>
                            <MDBBtn color="primary">Save changes</MDBBtn>
                        </MDBModalFooter>
                    </MDBModal>
                </MDBContainer>


        );
    }
}

export default ModalPage;

Answer 1

您只需要一个子组件上的点击事件，而不是 2 个点击事件。与其尝试向父按钮发送点击以调用 toggle()，只需将切换函数传递给要调用的子按钮：

卡片：

import React, { Component } from 'react';
import ModalPage from './modal.jsx'


class Card extends Component {

    render() {
        return (
            <div>
                <div className="card m-5" style={{ width: '18rem' }}>
                    <img src={this.props.img} className="card-img-top" />
                    <div className="card-body">
                        <h5 className="card-title">{this.props.title}</h5>
                        <p className="card-text">{this.props.desc}</p>
                      //*****************************************
                        <button onClick={this.props.click}></button>
                      //*****************************************
                    </div>
                </div>
            </div>
        )
    }
}

export default Card;

模态：

import React, { Component } from 'react';
import { MDBContainer, MDBBtn, MDBModal, MDBModalBody, MDBModalHeader, MDBModalFooter } from 'mdbreact';

class ModalPage extends Component {
    state = {
        modal13: false
    }

    toggle = nr => () => {
        let modalNumber = 'modal' + nr
        this.setState({
            [modalNumber]: !this.state[modalNumber]
        });
    }

    render() {
        return (

                <MDBContainer>

                    {/* I am assuming that this is a reference to <Card /> - simply pass in the onClick function as a parameter.  You can even use onClick here and this.props.onClick in the child element */}
                    <MDBBtn color="primary" click={this.toggle(13)}>
                        Modal
                    </MDBBtn>


                    <MDBModal isOpen={this.state.modal13} toggle={this.toggle(13)}>
                        <MDBModalHeader toggle={this.toggle(13)}>
                            {this.props.title}
                        </MDBModalHeader>
                        <MDBModalBody>
                            {/* edit here */}
                            {this.props.content}
                        </MDBModalBody>
                        <MDBModalFooter>
                            <MDBBtn color="secondary" onClick={this.toggle(13)}>
                                Close
                            </MDBBtn>
                            <MDBBtn color="primary">Save changes</MDBBtn>
                        </MDBModalFooter>
                    </MDBModal>
                </MDBContainer>


        );
    }
}

export default ModalPage;