ReactJS-Popover onClick insde数据内容不起作用

Question

我正在使用ReactJS，我试图做一个删除确认弹出窗口，它可以工作，但是当我单击“删除”时根本不起作用！

我使用的是按钮，内部有一个图标，单击时应弹出其数据内容，它确实可以显示！但是里面的onClick不起作用，也许是我编写的方式吗？不知道发生了什么事

我做错了什么？

谢谢，希望您能帮助我！

import React, { Component } from 'react';
import moment from 'moment';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faTrashAlt, faEdit, faTimes } from '@fortawesome/free-solid-svg-icons'

import NewTask from '../NewTask/NewTask';

import './Tasks.css';



 class Tasks extends Component {
    constructor(props) {
        super(props);
        this.state = {
            projectId: props._id,
            project: props.project,
            tasks: []
        };
    }

    componentDidMount() {
        fetch(`/dashboard/project/${this.props.projectId}/tasks`)
            .then(response => {
                return response.json()
            }).then(task => {
                this.setState({
                    tasks: task.tasks
                })
            }).catch(error => console.error('Error:', error));
    }

    appendTask = task => {
        let tasks = this.state.tasks;
        tasks.push(task);
        this.setState({tasks});
    }

    removeTask = taskId => {
        let tasks = this.state.tasks;

        let taskToDel = tasks.find(function(element){ 
            if(element._id === taskId) {
                return element;
            }
        });

        if(taskToDel) {
            // Find index of task to remove
            const index = tasks.indexOf(taskToDel);
            // If task index is found remove task from array
            if(index != -1)
                tasks.splice(index, 1);

            this.setState({tasks});

        }

    }


    deleteTaskOnDb = task => {
        let data = {taskId: task._id};

        fetch(`/dashboard/project/${this.props.projectId}/tasks/delete`, {
            method: 'delete',
            body: JSON.stringify(data),
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(response => {
            //if(response.status === 200)
                return response.json()
        }).then(taskId => {
            this.removeTask(taskId);
        }).catch(error => console.error('Error:', error));
    }


    render() {

//POPOVER FUNCTION HERE

        $(function () {
            $('[data-toggle="popover"]').popover()
          })
//POPOVER FUNCTION HERE

        const fontawesomeiconStyle = {
            fontSize: '1em',
            color: '#bd822a',
            textAlign: 'center'
        }

        const listStyle = {
            display:'flex', 
            flexFlow: 'row wrap',
            justifyContent: 'space-between'
        }

        const { tasks } = this.state;
        return (


            <div>
                <ul className="task-list">
                    {tasks.map(task =>
                <li key={task._id} style={listStyle}> <div>
                {task.tasktitle} 
                <br/>
                <p style={{fontSize: '10px', color: '#a2a2a2'}}>{moment(task.created).format('MMM DD YY, h:mm A')} </p>  

                </div>
              <div>
                <p style={{fontSize: '12px', color: '#a2a2a2'}}>{task.taskcomment}</p>
              </div>
                   <div>

    //BUTTON HERE

              <button type="button" className="example-popover btn--delete button--tasks" data-html="true" data-container="body" data-toggle="popover" data-placement="right" data-content="Are you sure? <button type='button' className='btn--delete button--tasks' onClick='{() => this.deleteTaskOnDb(task)}'> Delete</button>">
                   <FontAwesomeIcon style={fontawesomeiconStyle} icon={faTimes} />
               </button>

    //BUTTON HERE
                    </div>
                </li>
                    )}
                </ul>
                {this.props.project &&
                    this.props.project._id &&
                    <NewTask projectId={this.props.project._id} appendTask={this.appendTask}/>
                }
          </div> 
        );
    }
}

export default Tasks;