反应如何在按钮单击事件时进行呼叫模式

Question

I want to make when i click button, show modal in different class. how to make it this?

import React, { Component } from 'react';
import addmodal from './addmodal';

class page extends Component {
  ...//skip
  handleAdd= () =>{
    //...how?
  }
  render(){
    return (
      <button onClick={this.handleAdd} > Add </button>
      )
   }
}


import React, { Component } from 'react';

class addmodal extends Component {
   // ... skip
  render(){
    return(
      <modal inOpen={this.state.isopen} >
        ...//skip
      </modal>
    )
  }
}

export default addmodal;

I can't call this addmodal... how to call modal?

Answer 1

First, your variable naming is terrible. I fixed it for you here. The state that dictates if modal is open must be on the parent component since you have your trigger there. Then, pass it as props to the modal component. Here is the fixed code for you:

  import React, { Component } from 'react';
  import AddModal from './addmodal';

  class Page extends Component {
    constructor(){
      super();
      this.state = { isModalOpen: false };
    }
    ...//skip
    handleAdd= () =>{
      this.setState({ isModalOpen: true });
    }
    render(){
      return (
        <div>
          <button onClick={this.handleAdd} > Add </button>
          <AddModal isOpen={this.state.isModalOpen} />
        </div>
        )
    }
  }


  import React, { Component } from 'react';

  class AddModal extends Component {
    // ... skip
    render(){
      return(
        <modal inOpen={this.props.isOpen} >
          ...//skip
        </modal>
      )
    }
  }

  export default AddModal;

Answer 2

what about using trigger. Its very usefull.

<Modal trigger={ <button onClick={() => onCLickPay()} className={someting}>  When clicked here modal with show up</button>  }`enter code here` >