制作React todo应用。想要双击列表项以对其进行编辑]] << [

Question

我是初学者，正在制作待办事项应用。除了CRUD中的U，我可以执行CRD-我只希望能够进行编辑。这是我的文件：

App.js：

import React, {useState, useEffect} from "react";
import "./styles.css";
import CreateTask from './Components/CreateTask';
import Task from './Components/Task';

const App = () => {
  const [remaining, setRemaining] = useState(0);
  const [array, setArray] = useState([]);

  useEffect(() => {
    setRemaining(array.filter(item => !item.completed).length);
  })

  const addItem = e => {
    const temp = [...array, {name: e, completed: false}];
    setArray(temp);
  }

  const doneTask = e => {
    const temp = [...array];
    temp[e].completed = !temp[e].completed;
    setArray(temp);
  }

  const deleteTask = e => {
    const temp =[...array];    
    temp.splice(e, 1);
    setArray(temp);
  }

  return (
    <div className="App">
      <h1>Todo List</h1>
      <hr />
      <h3>Remaining tasks: {remaining}</h3>
      <Task array={array} doneTask={doneTask} deleteTask={deleteTask}/>     
      <CreateTask addItem={addItem}/>
    </div>
  );
}


export default App;

Task.js

import React from 'react';

const Task = ({array, doneTask, deleteTask}) => {
  return (
    <div>
      {array.map((x, i) => {
        return ( 
            <div>
              <li style={{textDecoration: (x.completed ? 'line-through' : '')}}>
                {x.name}
                <button onClick={() => doneTask(i)}>{x.completed ? 'Undone' : 'Done'}</button>
                <button onClick={() => deleteTask(i)} style={{background: 'red'}}>x</button>           
              </li>                      
            </div>
        )
      })}
    </div>
  )
}

export default Task

CreateTask

import React, {useState} from 'react';

const CreateTask = ({addItem}) => {
  const [term, setTerm] = useState('');

  const submit = e => {
    e.preventDefault();
    if(!term) return;
    addItem(term);
    setTerm('');
  }

  return (
    <div>
      <form onSubmit={submit}>
        <input onChange={e => setTerm(e.target.value)} placeholder='Enter item' value={term}/>
      </form>
    </div>
  )
}

export default CreateTask

我只是想知道如何双击列表项，并显示一个输入字段，并且您在此新输入字段中输入的任何值都将设置为默认值。简单的编辑。您将如何以初学者可以理解的最简单方式实现此目标？

我知道使用（i）作为键不是最佳实践，但我认为这样做是可以的，因为这只是一个简单的待办事项应用程序

提前谢谢您

我是初学者，正在制作待办事项应用。除了CRUD中的U，我可以执行CRD-我只希望能够进行编辑。这是我的文件：App.js：从“反应”中导入React，{useState，useEffect}；导入“ ...

Answer 1

这应该适用于双击