单击添加任务按钮时，我的 Bootstrap 模式未打开

Question

提前求解的Tysm！
我认为问题出在第 52 行的 <button className="btn" onClick={handleDelete(todo.todo_id)}> 中。

UncompletedTaskView.js 在 App.js

import React,{useState} from 'react';
import axios from 'axios';
import AddTask from './AddTask';
import EditButton from './EditButton';

const UncompletedTaskView = () => {

  const [todoList,setTodoList] = useState([]);  
  const [viewCompleted,setViewCompleted] = useState(false);

  const refreshList = async () => {
    try {
      const response = await axios.get("http://localhost:8000/api/tasks/");
      response.data.filter( (item) => item.completed === viewCompleted );
      setTodoList(response.data);
    } catch(err) {
      console.log(err.message);
    }    
  };

  const handleDelete = async (id) => {
    await  axios.delete(`http://localhost:8000/api/tasks/${id}/`);
    refreshList();
  };

  

    return (
  <div className="container">
        <h1 className='text-black text-uppercase text-center my-4'>Todo List</h1>    
      <table className="table table-hover">
        <thead>
          <tr>
            <th>Title</th>
            <th>Description</th>
            <th>Mark Completed</th>
            <th>Edit</th>
            <th>Delete</th>
          </tr>
        </thead>
        <tbody>
          {
            todoList.map((todo) => {
              return <tr id={todo.todo_id}>
                <td>{todo.title}</td>
                <td>{todo.description}</td>
                <td className="radio"> 
                  <label><input type="radio" name="optradio" onClick={() => setViewCompleted(true)}/>Completed</label>
                </td>
                <td><EditButton refreshList={refreshList}/></td>
                <td>
                  <button className="btn" onClick={handleDelete(todo.todo_id)}>
                    Delete
                  </button>
                </td>
              </tr>
            })
          }
        </tbody>
      </table>
      <AddTask refreshList={refreshList}/>    
    </div>);
    
}

export default UncompletedTaskView;

AddTask.js 文件

import React,{ useState} from 'react';
import axios from 'axios';

const AddTask = ({ refreshList }) => {

    const [title,setTitle] = useState("");
    const [description,setDescription] =useState("");
    const completed= false;

    const handleSubmit = async() => {
        const item = {
            "title" : title,
            "description": description,
            "completed": completed
        };
        try {
            await axios.post(`http://localhost:8000/api/tasks/`, item);
            refreshList();
        } catch (err) {
            console.log(err.message);
            
        }
    }

    return (<div>
        <button 
            type="button" 
            className="btn btn-success" 
            data-toggle="modal" 
            data-target="#myModal">
                Add Task
            </button>
        <div className="container">                      
        
            <div className="modal fade" id="myModal" role="dialog">
                <div className="modal-dialog">
                
                
                <div className="modal-content">
                    <div className="modal-header">
                        <button type="button" className="close" data-dismiss="modal">&times;</button>
                        <h4 className="modal-title">Add Task</h4>
                    </div>
                    <div className="modal-body">
                        <label htmlFor="title">Title</label>
                        <input 
                            type="text" 
                            name="title" value={title} 
                            onChange={ (e) => setTitle(e.target.value)} 
                            placeholder="Task Title" />
                        <label htmlFor="description">Title</label>
                        <input 
                            type="text" 
                            name="description" value={description} 
                            onChange={ (e) => setDescription(e.target.value)} 
                            placeholder="Task Description" />                    
                    </div>
                    <div className="modal-footer">
                    <button type="button" className="btn btn-success" onClick={handleSubmit}>Add</button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    </div>
                </div>
                
                </div>
            </div>
        
        </div>
    </div>)
}

export default AddTask;

提前求解的Tysm！

Answer 1

我使用的是 3.37，但我用 4.3.1 替换了它，它工作得很好！ @Suresh 谢谢！

单击添加任务按钮时，我的 Bootstrap 模式未打开

While clicking on Add Task Button my Bootstrap modal is not opening

javascript

bootstrap-modal

reactjs