时间戳

首页 > 解决方案 > 如何在 React 中显示特定项目 onClick？

reactjs - 如何在 React 中显示特定项目 onClick？

问题描述

所以我的反应中有一个 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。有没有办法实现它？感谢帮助！

标签： reactjs

解决方案

您可以使用状态显示隐藏

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>

推荐阅读