Создание приложения React todo. Хотел бы dblclick элемент списка, чтобы редактировать его - PullRequest
Новая
       19

Создание приложения React todo. Хотел бы dblclick элемент списка, чтобы редактировать его

0 голосов
/ 27 января 2020

Я новичок, и я делаю приложение todo. Я могу сделать CRD кроме U в CRUD - я просто хочу иметь возможность редактировать. Вот мои файлы:

Приложение. 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;

Задание. 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) в качестве ключа не лучшая практика, но я думаю, что это нормально для меня, так как это только простое приложение todo

Заранее спасибо

...