反應如何在按鈕單擊事件時進行呼叫模式

Question

我想當我點擊按鈕時，在不同的類中顯示模態。 如何做到這一點？

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;

我不能稱之為 addmodal ... 如何調用 modal？

Answer 1

首先，你的變量命名很糟糕。 我在這里為你修好了。 指示模態是否打開的狀態必須在父組件上，因為您在那里有觸發器。 然后，將其作為道具傳遞給模態組件。 這是您的固定代碼：

  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

使用觸發器怎么樣。 它非常有用。

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