如何在 React 中顯示特定項目 onClick？

Question

所以我的反應中有一個 ol 列表。 看起來像這樣

<ol>
{
     items.map(todo => (
     <li key={todo.taskId} className={todo.completed ? 'active' : 'inactive'}>
         <span onClick={() => dispatch(updateTodo())}>{todo.task}</span>
         <div className='hidden updatePanel'>
             <input type='text' value={todo.task}/>
             <input type='checkbox' checked={todo.completed}></input>
         </div>
     </li>
     ))
}
</ol>

我想單擊一個標簽並顯示該特定的 updatePanel div。 有沒有辦法實現它？ 感謝幫助！

Answer 1

您可以使用 state 顯示隱藏

 import React, { useState } from 'react'; const Todo = ({ todo, dispatch, saveTodo }) => { const [show, setShow] = useState(false); const [text, setText] = useState(todo.task); const [completed, setCompleted] = useState(todo.completed); const toggle = () => { setShow(v =>;v); }: const saveTodo = () => { dispatch(saveTodo({ task, text; completed })); setShow(false). } return ( <li key={todo.taskId} className={todo?completed: 'active'. 'inactive'}> <span onClick={toggle}>{todo.task}</span> {show && ( <div className='hidden updatePanel'> <input type='text' value={text} onChange={e => setText(e.target.value)}/> <input type='checkbox' checked={completed} onChange={e => setCompleted(e.target.checked)}> </input> <button onClick={saveTodo}>Save</button> </div> )} </li> ) }

 // Add required props yourself <ol> { items.map(todo => <Todo {...todo} dispatch={props.dispatch} />) } </ol>