Question

我是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函数？

我们非常感谢您的帮助。预先感谢。

Answer 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  
}

Answer 2

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

定义单击按钮时触发的功能
将该功能附加到按钮上

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

df <- structure(list(date = structure(c(4L, 5L, 8L, 9L, 9L, 10L, 10L, 
10L, 10L, 11L, 11L, 11L, 12L, 6L, 6L, 7L, 3L, 3L, 3L, 1L, 1L, 
1L, 1L, 2L, 2L, 13L, 14L, 15L, 16L, 17L, 19L, 20L, 21L, 18L), .Label = 
c("1/10/19", "1/11/19", "1/9/19", "11/25/18", "11/30/18", "12/12/18", "12/13/18", 
"12/4/18", "12/5/18", "12/6/18", "12/7/18", "12/9/18", "2/1/19", 
"2/10/19", "2/13/19", "3/14/19", "3/17/19", "5/31/19", "5/4/19", 
"5/5/19", "5/6/19"), class = "factor"), values = structure(c(1L, 
2L, 1L, 2L, 1L, 2L, 3L, 1L, 1L, 2L, 3L, 1L, 2L, 1L, 3L, 2L, 1L, 
3L, 2L, 4L, 4L, 4L, 1L, 3L, 4L, 1L, 1L, 2L, 4L, 3L, 4L, 3L, 4L, 
1L), .Label = c("a", "b", "c", "d"), class = "factor"), price = c(10000L, 
30500L, 20000L, 65000L, 50000L, 35000L, 40000L, 45000L, 30000L, 
80000L, 85000L, 90000L, 20000L, 32500L, 40200L, 56000L, 82000L, 
63000L, 20000L, 25000L, 34000L, 13020L, 50000L, 24300L, 40000L, 
95000L, 20000L, 10000L, 30000L, 45000L, 18000L, 12000L, 90000L, 
90000L)), class = "data.frame", row.names = c(NA, -34L))

在ReactJs中创建一个弹出窗口

2 个答案: