Блог

Я пытаюсь создать свой самый первый список задач с НУЛЯ. Это означает, что абсолютно никаких руководств или копирования кода, это скорее тест для меня.

Тем не менее, я наткнулся на кирпичную стену. В настоящее время мое приложение работает как таковое.

Создан компонент ввода, который позволит пользователю вводить задачу, он содержит кнопку отправки. Когда задача отправлена, реквизит передается в Todos.js компонент, который содержит «карту», которая отображает все задачи на странице, он будет отображать LI внутри, содержащий задачу, и LI будет содержать кнопку удаления.

Однако, похоже, я не могу понять, как удалить задачу с помощью кнопки удаления, может кто-нибудь помочь мне указать правильное направление?

Код:

Todos.js

 import React, { Component } from "react"

const Todos = (props) => {
  const deleteTodo = (e) => {
    console.log(e)
  }

  return (
    <div class="todo_list">
      <ul>
        {props.todos.map((todo) => {
          return (
            <li key={todo} className="new_todo">
              {todo}
              <button id="todo_del" onClick={deleteTodo}>
                Delete
              </button>
            </li>
          )
        })}
      </ul>
    </div>
  )
}

export default Todos

 

Input.js

 import React, { useState } from "react"

import Todos from "./Todos"

const Input = (props) => {
  const [todo, setTodo] = useState([])
  const [input, setInput] = useState("")

  const setInputState = (e) => {
    setInput(e.target.value)
    console.log(input)
  }

  const addTodo = (e) => {
    e.preventDefault()
    setTodo([...todo, input])
    setInput("")
  }

  return (
    <>
      <div class="input">
        <form>
          <input
            type="text"
            id="todo_input"
            onChange={setInputState}
            value={input}
          />
          <input type="submit" id="submit_btn" onClick={addTodo} />
        </form>
      </div>
      <div class="todo_list">
        <Todos todos={[...todo]} />
      </div>
    </>
  )
}

export default Input
 

Поскольку вы упомянули, что это упражнение для себя, я не уверен, сколько деталей использовать, но здесь идет.

Список задач поддерживается хуком useState во входном компоненте. Вам разрешено передавать функции в качестве реквизита.

Также помните, что map() это позволит вам передавать как значение (todo), так и второй аргумент (индекс). Тогда компоненты, которые вы сопоставляете, будут знать об индексе и смогут передать его в вашу deleteTodo() функцию.