[英]How to show a specific item onClick in React?
所以我的反应中有一个 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。 有没有办法实现它? 感谢帮助!
您可以使用 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.