确认按钮，触发所有确认框打开

Question

我正在完成我的 todo 应用程序，因为 redux 对我来说有点新，当然我遇到了问题。我的问题是，当我单击删除按钮（回收图标）时，我希望弹出一个带有基本是和否按钮的确认框，我已经构建了它，但是...当我单击一个回收按钮时，所有其他确认框都会出现设置为 True，它们会同步弹出。右边只需要弹出一个框即可todo.id.

注意：我之前在没有 redux 的情况下构建过这个，但我仍然围绕着 redux。

这是我的代码：

JS:

import React, {useState, Fragment} from 'react'
import { useDispatch, useSelector } from 'react-redux';
import "./todo.css"

const Todos = () => {
const dispatch = useDispatch();
const todos = useSelector(state => state.todos);
const confirmationSt = useSelector(state => state.confirmation)
const handleConfirm = id => {
    dispatch({
        type: "CONFIRM",  
    })
}
const handleContinue = () => {
    dispatch({
        type: "CONTINUE",
        
    })
}
const handleClick = id => dispatch({
    type: "DELETE_TODO",
    payload: id,
})
if (!todos || !todos.length) {
    return <p>Empty</p>
}

return (
    <ul className='unlist'>{todos.map(todo =><Fragment key={todo.id}> <div  className='todoContent'><li >{todo.label}</li>
     <div><button className='delete' onClick={handleConfirm}><i className="fas fa-recycle"></i></button> 
     <button className='delete' onClick={handleConfirm}><i className="fas fa-wrench"></i></button> 
     </div> 
    
     </div>
     {confirmationSt === true ? <div className='confirmation-box'>
         Are you sure?
         <button  onClick={() => handleClick(todo.id)}>Yes</button>
         <button onClick={handleContinue}>No</button>
     </div> : null}
     </Fragment>
      )}
     
     </ul>
)   
}

减速器：

const initalState = {
todos: [],
confirmation: false,

}

const reducer = (state = initalState, action) => {
switch (action.type) {
    case "ADD_TODO":
        return {
            ...state,
            todos: [...state.todos, action.payload],
            
        }
    case "DELETE_TODO":
        return {
            ...state,
            todos: state.todos.filter(todo => todo.id !== action.payload)
        }
    case "CONFIRM":
        return {
            ...state,
            confirmation: !state.confirmation,
        }
    case "CONTINUE":
        return {
            ...state,
            confirmation: false
        }
        default: return state;
 }
}

export default reducer

Answer 1

我已将确认从布尔值更改为任务的 id


import React, { useState, Fragment } from 'react'
import { useDispatch, useSelector } from 'react-redux';
import "./todo.css"

const Todos = () => {
  const dispatch = useDispatch();
  const todos = useSelector(state => state.todos);
  const confirmationSt = useSelector(state => state.confirmation)
  const handleConfirm = id => {
    dispatch({
      type: "CONFIRM",
      payload: id
    })
  }
  const handleContinue = () => {
    dispatch({
      type: "CONTINUE",
    })
  }
  const handleClick = id => dispatch({
    type: "DELETE_TODO",
    payload: id,
  })
  if (!todos || !todos.length) {
    return <p>Empty</p>
  }

  return (
    <ul className='unlist'>
      { todos.map(todo => 
          <Fragment key={todo.id}> 
              <div className='todoContent'>
                  <li >{todo.label}</li>
                  <div>
                    <button className='delete' onClick={()=>handleConfirm(todo.id)}>
                      <i className="fas fa-recycle"></i>
                    </button>
                    <button className='delete' onClick={()=>handleConfirm(todo.id)}>
                      <i className="fas fa-wrench"></i>
                    </button>
                  </div>
              </div>
              {
                confirmationSt === todo.id ? 
                <div className='confirmation-box'>
                    Are you sure?
                    <button onClick={() => handleClick(todo.id)}>Yes</button>
                    <button onClick={handleContinue}>No</button>
                </div> 
                : null
              }
          </Fragment>
    )}
    </ul>
  )
}

const initalState = {
todos: [],
confirmation: -1,

}

const reducer = (state = initalState, action) => {
switch (action.type) {
    case "ADD_TODO":
        return {
            ...state,
            todos: [...state.todos, action.payload],
            
        }
    case "DELETE_TODO":
        return {
            ...state,
            todos: state.todos.filter(todo => todo.id !== action.payload)
        }
    case "CONFIRM":
        return {
            ...state,
            confirmation: action.payload,
        }
    case "CONTINUE":
        return {
            ...state,
            confirmation: false
        }
        default: return state;
 }
}

export default reducer

确认按钮，触发所有确认框打开

Confirmation button, triggers all confirmation boxes to open

reactjs

redux

react-redux