如何仅将组件的 function 传递给另一个组件而不渲染它

Question

New to React and I want to have a component's button open a general modal by calling a function in another component. Eventually, I want a navbar to have a button, a bootstrap card to have a button, when clicked it opens one modal in a separate component. I tried with ref={} but I don't understand it I hope their is another way. Here is my simple code in which I want that button in ClickButton.js to open the Modal in Header.js. When I bring over the ClickButton parent, I have to add it, which add two buttons. How do I get just the CLickButton.js's button to access the toggle function in Headerjs. without causing two buttons to be rendered as shown below?

import React, { Component } from 'react';
import {Button} from 'reactstrap';
import Header from './Header';

class ClickButton extends Component {

  constructor(props) {
    super(props);

    this.state = {

    };
  }

  onClicker = (props) => {
   this.props.toggleModal(); 
  }
  render( ) {
    return (
      <div>
        <Button onClick={this.onClicker} color="primary">OtherComponentButton</Button>
      </div>
    );
  }
}

export default ClickButton;

Here is the Modal

import React, { Component } from "react";
import { Button, Modal, ModalBody, Form, FormGroup,Label,Input} from "reactstrap";
import ClickButton from './ClickButton';

class Header extends Component {
  constructor(props) {

    super(props);

    this.state = {

      modal: false

    };
  }
  toggle = () => {

    this.setState({

      modal: !this.state.modal

    });

  }
  render() {
    return (
      <div>
        <Modal isOpen={this.state.modal}>
          <ModalBody>
          <Form>
      <FormGroup>
        <Label for="exampleEmail">Name</Label>
        <Input type="email" name="email" id="exampleEmail" placeholder="Enter Name" />
      </FormGroup>
            </Form>

          </ModalBody>
          <Button onClick={this.toggle}>Close</Button>
        </Modal>
          <Button onClick={this.toggle}>ModalComponent</Button>

          <ClickButton toggleModal={this.toggle} />

      </div>
    );
  }
}

export default Header;

Here is the image that shows both buttons. How do I get it to just show the CLickButton button only once.

Answer 1

To access props in a class method you may need to explicitly bind the class method to the instance.

  render( ) {
    return (
      <div>
        <Button onClick={this.onClicker.bind(this)} color="primary">OtherComponentButton</Button>
      </div>
    );
  }

Or you can also just call the prop method directly

  render( ) {
    return (
      <div>
        <Button onClick={this.props.toggleModal} color="primary">OtherComponentButton</Button>
      </div>
    );
  }

Answer 2

Not sure that I understand the issue, but what about this?

ClickButton:

class ClickButton extends Component {
  constructor(props) {
    super(props);

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.props.handleClick();
  }

  render() {
    return <button onClick={this.handleClick}>OtherComponentButton</button>;
  }
}

Modal:

class Header extends Component {
  constructor(props) {
    super(props);

    this.onClick = this.onClick.bind(this);
  }

  onClick() {
    this.props.handleClick();
  }

  render() {
    return (
      <>
        <Modal isOpen={this.props.modal}>
          <ModalBody>
            <Form>
              <FormGroup>
                <Label for="exampleEmail">Name</Label>
                <Input
                  type="email"
                  name="email"
                  id="exampleEmail"
                  placeholder="Enter Name"
                />
              </FormGroup>
            </Form>
          </ModalBody>
          <Button onClick={this.onClick}>Close</Button>
        </Modal>
        <Button onClick={this.onClick}>ModalComponent</Button>
      </>
    );
  }
}

App component defines state.modal property and provides it via props to Modal, also defines handleToggle used in ClickButton and Modal to manage state.modal:

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      modal: false,
    };

    this.handleToggle = this.handleToggle.bind(this);
  }

  handleToggle() {
    this.setState({
      modal: !this.state.modal,
    });
  }

  render() {
    return (
      <div>
        <Header modal={this.state.modal} handleClick={this.handleToggle} />
        <ClickButton handleClick={this.handleToggle} />
      </div>
    );
  }
}