在 ReactJs 中创建一个弹出窗口答案

【问题标题】：Creating a popup in ReactJs在 ReactJs 中创建一个弹出窗口
【发布时间】：2019-09-01 22:18:04
【问题描述】：

我是 ReactJs 的新手，正在尝试通过 onclick 事件创建一个弹出窗口。

我正在关注这个资源 - https://dev.to/skptricks/create-simple-popup-example-in-react-application-5g7f

文件 - /src/components/feed.js

import React from 'react';

function feed (props) {

    return (
        <div className="card-header">
            <h2>{props.firstname} {props.middleInitial} {props.lastname}</h2>
            <h4 className="card-title">{props.gender}</h4>
        </div>
            <div className="card-footer">
                <button onClick="" className="btn btn-secondary">Click To view Samples</button>
            </div>
    );
}

export default feed;

文件 - /src/app.js

import React, { Component } from 'react';

import './App.css';

import Header from './components/header.js';
import fetchfeed  from './components/fetchfeed.js';

class App extends Component {
    render() {
        return (
            <div>
                <Header />
                <div className="d-flex justify-content-center">
                    <fetchfeed />
                </div>
            </div>
        );
    }
}

export default App;

文件 - /src/components/fetchfeed.js

import React from 'react';
import axios from 'axios';
import Pagination from "react-js-pagination";
import feed  from './feed.js';

class fetchfeed extends React.Component {

 constructor(props) {
    super(props);
    this.state = {
        feedDetails: []
    };
    this.fetchURL = this.fetchURL.bind(this);
}

fetchURL() {
   axios.get(`/feed/`)
        .then( response => {
    ..............
    });
 //Fetch the feed url and process the variables and setstate to feedDetails array.
}
componentDidMount () {
    this.fetchURL()
}


populateRowsWithData = () => {
    const feedData = this.state.feedDetails.map(feed => {
        return <feed
            key = {feed.id}
            firstname = {feed.firstname}
            middleInitial = {feed.middleInitial}
            lastname = {feed.lastname}
            dateOfBirth = {feed.dateString}
            gender = {feed.gender}
        />;
    });

    return feedData
}

render(){

    return (
        <div >

            {this.populateRowsWithData()}

        </div>
    );
}

}
export default fetchfeed;

我已经在 /src/components 下创建了 Popup.js，并按照参考链接的指示创建了弹出窗口所需的 css。我的问题是我应该在哪里定义弹出的 onclick 函数？

非常感谢任何帮助。提前致谢。

【问题讨论】：

如果您希望模型在您单击feed.js 中的“单击查看示例”按钮时显示，您应该在feed.js 中定义您的onClick 函数并将其附加到按钮上。
怎么附加？我已经在 feed.js 中定义了函数，但似乎没有工作。
我看不到您在feed.js 中定义了任何函数。而且你的按钮的onClick 属性是空的。

标签： javascript reactjs

【解决方案1】：

正如源代码中所说，您应该在要在其中显示弹出窗口的组件中执行类似的操作：

//This is the function
 togglePopup() {  
   this.setState({  
     showPopup: !this.state.showPopup  
   }); 
 }

// This is what you should do in the render method
{this.state.showPopup ?  
    <Popup  
          text='Click "Close Button" to hide popup'  
          closePopup={this.togglePopup.bind(this)}  
    />  
: null  
}

【讨论】：

【解决方案2】：

据我了解，您正在尝试根据您的要求自定义教程中的代码。如果您想在单击“单击查看示例”按钮时打开弹出窗口，您应该首先做两件事。

定义点击按钮时触发的函数
将该功能附加到按钮

以下代码演示了上述步骤。

import React from 'react';

function feed (props) {
    function openPopup(){
      //code relevant to open popup
    }

    return (
        <div className="card-header">
            <h2>{props.firstname} {props.middleInitial} {props.lastname}</h2>
            <h4 className="card-title">{props.gender}</h4>
        </div>
            <div className="card-footer">
                <button onClick={openPopup} className="btn btn-secondary">Click To view Samples</button>
            </div>
    );
}

export default feed;

【讨论】：