Как заставить кнопку нажать другую кнопку из разных компонентов в React

Question

Я новичок, чтобы отреагировать, и мне сложно понять, как происходит передача данных в одном направлении, я делал простое приложение и использую md bootstrap для некоторых готовых bootstrap компонентов, я импортировал компонент модального (который имеет кнопку при нажатии, переключает модальное), поэтому в моем приложении у меня есть карты, у каждого есть кнопка, которая должна переключать кнопку, но я не мог понять, как связать кнопку карты с кнопка компонента md bootstrap.

Компонент Card:

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;