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;

我不能称呼这种增加方式... 如何调用模态？

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

当按钮单击事件时，如何反应如何使呼叫模态化

2 个答案: