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

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` >