Reactjs 如何在React中创建确认删除弹出窗口？

我正在创建一个Todo应用程序，并尝试创建一个确认删除弹出窗口，当用户想要删除Todo时，该弹出窗口将可见

在我的

todo.js

组件中，我创建了一个

onClick

回调，

handleDelete

，在我的delete按钮中，该回调将弹出窗口设置为true，使其可见，问题是在我的

handleDelete

中，我将

Id

作为参数传递，因此，我可以跟踪单击的todo并对其进行过滤，以显示更新todo状态的新数据，但我只想在用户单击弹出窗口中的确认按钮时更新数据

应用程序组件：

function App() {
  const [inputValue, setInputValue] = useState("");
  const [todos, setToDos] = useState([]);
  const [noToDo, setNoToDo] = useState(false);
  const [popup, setPopup] = useState(false);

  const handleOnSubmit = (e) => {
    e.preventDefault();

    setNoToDo(false);
    const ide = nanoid();
    const date = new Date().toISOString().slice(0, 10);
    const newToDo = { task: inputValue, id: ide, date: date };
    setToDos([...todos, newToDo]);
    setInputValue("");
  };

  const handleDelete = (id) => {
    setPopup(true);

    let filteredData = todos.filter((todo) => todo.id !== id);

    {
      /*
    filteredData is the new data, but I only want to update 
    todos with filteredData when the user has clicked on the confirm
    button in the modal component, which execute(handleDeleteTrue)*/
    }
  };

  const handleDeleteTrue = () => {
    setPopup(false);
    setToDos(filteredData);
  };

  const handleEdit = (id, task) => {
    setInputValue(task);
    const EditedData = todos.filter((edited) => edited.id !== id);
    setToDos(EditedData);
  };

  return (
    <div className="App">
      <div className="app_one">
        <h1>To do app</h1>
        <form action="" className="form" onSubmit={handleOnSubmit}>
          <input
            type="text"
            placeholder="Go to the park..."
            onChange={(e) => setInputValue(e.target.value)}
            value={inputValue}
          />
          <button type="submit">ADD TO DO</button>
        </form>
      </div>
      {noToDo && <FirstLoad />}
      {todos.map((todo) => {
        return (
          <div key={todo.id} className="result">
            <Todo
              {...todo}
              handleDelete={handleDelete}
              handleEdit={handleEdit}
            />
          </div>
        );
      })}
      {popup && <Popup handleDeleteTrue={handleDeleteTrue} />}
    </div>
  );
}

export default App;

函数应用程序（）{
常量[inputValue，setInputValue]=useState（“”）；
const[todos，setToDos]=useState（[]）；
常量[noToDo，setNoToDo]=使用状态（false）；
const[popup，setPopup]=useState（false）；
const handleOnSubmit=（e）=>{
e、 预防默认值（）；
setNoToDo（假）；
常量ide=nanoid（）；
const date=new date（）.toISOString（）.slice（0,10）；
const newToDo={task:inputValue，id:ide，date:date}；
setToDos（[…todos，newToDo]）；
setInputValue（“”）；
};
常量handleDelete=（id）=>{
setPopup（true）；
让filteredData=todos.filter（（todo）=>todo.id！==id）；
{
/*
filteredData是新数据，但我只想更新
当用户单击“确认”按钮时，使用filteredData的TODO
模式组件中执行的按钮（handleDeleteTrue）*/
}
};
const handledeletrue=（）=>{
设置弹出窗口（假）；
setToDos（filteredData）；
};
const handleEdit=（id，task）=>{
设置输入值（任务）；
const EditedData=todos.filter（（已编辑）=>edited.id！==id）；
setToDos（编辑数据）；
};
返回(
待办应用
setInputValue（e.target.value）}
值={inputValue}
/>
添置
{noToDo&}
{todo.map（（todo）=>{
返回(
);
})}
{弹出&&}
);
}
导出默认应用程序；

待办事项组件：

const Todo = ({ handleDelete, handleEdit, task, id, date }) => {
  return (
    <>
      <div className="result_text">
        <h3>{task}</h3>
        <p className="result_textP">{date}</p>
      </div>
      <div>
        <button onClick={() => handleEdit(id, task)} className="button green">
          Edit
        </button>
        <button onClick={() => handleDelete(id)} className="button">
          delete
        </button>
      </div>
    </>
  );
};

export default Todo;

function Popup({ handleDeleteTrue }) {
  return (
    <div className="modal">
      <div className="modal_box">
        <p>You sure you wanna delete?</p>
        <button className="modal_buttonCancel">Cancel</button>
        <button onClick={handleDeleteTrue} className="modal_buttoDelete">
          Confirm
        </button>
      </div>
    </div>
  );
}

export default Popup;

const Todo=（{handleelete，handleEdit，task，id，date}）=>{
返回(
{task}
{date}
handleEdit（id，任务）}className=“按钮绿色”>
编辑
handleDelete（id）}className=“button”>
删除
);
};
导出默认Todo；

模态组件：

const Todo = ({ handleDelete, handleEdit, task, id, date }) => {
  return (
    <>
      <div className="result_text">
        <h3>{task}</h3>
        <p className="result_textP">{date}</p>
      </div>
      <div>
        <button onClick={() => handleEdit(id, task)} className="button green">
          Edit
        </button>
        <button onClick={() => handleDelete(id)} className="button">
          delete
        </button>
      </div>
    </>
  );
};

export default Todo;

function Popup({ handleDeleteTrue }) {
  return (
    <div className="modal">
      <div className="modal_box">
        <p>You sure you wanna delete?</p>
        <button className="modal_buttonCancel">Cancel</button>
        <button onClick={handleDeleteTrue} className="modal_buttoDelete">
          Confirm
        </button>
      </div>
    </div>
  );
}

export default Popup;

函数弹出（{handledeletrue}）{
返回(
你确定要删除吗

取消
证实
);
}
导出默认弹出窗口；

我试图将

filteredata

声明为global变量，在我的

App

组件之外，因此当我执行

handleDelete

时，它会用过滤后的数据初始化该变量，只有当用户单击弹出窗口上的确认按钮时，它才会执行一个新函数

handledeletrue

，它将数据更新为

filteredData

---

它是有效的，但是在我的组件之外声明变量不是一个好的做法，所以有更好的方法吗？

当前代码中的问题是，您正在丢失应该删除的

id

，因此您需要将其存储在

ref

或

state

中

下面是一个解决方案，它将

id

存储在状态中，并带有显示/隐藏确认框的布尔标志：

const [popup, setPopup] = useState({
  show: false, // initial values set to false and null
  id: null,
});

将删除处理程序修改为：

// This will show the Cofirmation Box

const handleDelete = (id) => {
  setPopup({
    show: true,
    id,
  });
};

// This will perform the deletion and hide the Confirmation Box

const handleDeleteTrue = () => {
  if (popup.show && popup.id) {
    let filteredData = todos.filter((todo) => todo.id !== popup.id);
    setToDos(filteredData);
    setPopup({
      show: false,
      id: null,
    });
  }
};

// This will just hide the Confirmation Box when user clicks "No"/"Cancel"

const handleDeleteFalse = () => {
  setPopup({
    show: false,
    id: null,
  });
};

并且，在JSX中，将处理程序传递给

弹出窗口

：

{popup.show && (
  <Popup
    handleDeleteTrue={handleDeleteTrue}
    handleDeleteFalse={handleDeleteFalse}
  />
)}

{popup.show&&(
)}

我已经创建了自己的弹出窗口作为组件，但我想在单击弹出窗口中的删除选项时更新父窗口的状态