Question

我希望在单击类组件中的按钮时激活具有警报功能的组件。

我的功能组件

import React from 'react'

export default function ConfirmationModal() {

    alert = () => {
        alert("whatsup hotdawg?")
    }

  return (
    <div>
        {this.alert()}
    </div>
  )
}

在类组件中

我有这行想在功能组件onClick中触发Alert方法

<button>"ClickMe" onClick=<ConfirmationModal/> </button>

任何有关如何执行此操作的建议将不胜感激。

Answer 1

您可以在父组件中保留一个状态，例如isModalOpen，您在单击按钮时将其设置为true，并使用此状态有条件地呈现ConfirmationModal。

不要在渲染器上直接调用方法也是一个好主意，因为这会在每个渲染器中发生。您可以改为将警报移至componentDidMount。

示例

class ConfirmationModal extends React.Component {
  componentDidMount() {
    alert("whatsup hotdawg?");
  }

  render() {
    return <div>Modal</div>;
  }
}

class App extends React.Component {
  state = {
    isModalOpen: false
  };

  render() {
    return (
      <div>
        <button onClick={() => this.setState({ isModalOpen: true })}>
          Click me
        </button>
        {this.state.isModalOpen && <ConfirmationModal />}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 2

React是基于组件的库，因此请在同一组件中添加ui组件（按钮）和关联的逻辑。

将功能组件更改为以下组件。

import React from 'react';

export default class ConfirmationModal extends React.Component {

    alert = () => {
        alert("whatsup hotdawg?")
    }
    render () {
        return (
            <button onClick={this.alert}>"ClickMe"</button>
        )
    }
}

然后在类组件中导入上述组件并使用它。您的类组件应该看起来像这样。

render(){
     return (
          <ConfirmationModal />
     )
}

使用组件onClick

我的功能组件

在类组件中

2 个答案: