Как выбрать родственный узел элемента html?

Question

import React, {useEffect, useContext, useState} from 'react';
import {FormContext} from "../../../core/context";

export default function Todo(props) {
    const { todos, setTodos, deleteTodo, onEditSubmit, editContent, setEditContent} = useContext(FormContext);
    const [isEditing, setIsEditing] = useState(false);

    useEffect(() => {

    }, [isEditing])

    return (
        <div className={todoCard(props.todo)} id="todo-card">
            <div className="card-body d-flex align-items-center">
                <input type="checkbox" className="mx-2"
                       onChange={() => props.toggleCompleted(props.index)}
                       checked={props.todo.isCompleted}/><span className={props.todo.isCompleted ? 'line-through mr-auto': 'mr-auto'}>{props.todo.content}</span>
                <i className={editIcon()} id="edit" onClick={(e) => editTodo(e)}></i>
                <i onClick={() => deleteTodo(props.todo.id)} className="fa fa-trash-o fa-lg" id="trash-o"></i>
            </div>

            <div style={{display: 'none'}} className='card-footer m-0 p-0 justify-content-center'>
                <form className="p-2 d-flex" onSubmit={(e) => onEditSubmit(e, props.todo.id)}>
                    <input type="text" className="form-control mx-2" onChange={(e) => setEditContent(e.target.value)} />
                    <input type="submit" value="Submit" className="btn btn-warning"/>
                </form>
            </div>
        </div>
    );

    function editIcon() {
        let baseline = 'fa fa-pencil-square-o mx-3';
        if (isEditing) baseline += 'editing';
        return baseline;
    }

    function editTodo(e) {
       const cardFooter = e.target.parentElement.parentElement.childNodes[1];
        cardFooter.style.display === 'none' ? cardFooter.style.display = 'flex': cardFooter.style.display = 'none';
    }

    function todoCard(item) {
        let className = 'card';
        if (item.isFound) className += 'text-white bg-info';
        return className;
    }
}

В первой строке функции editTodo () я выбираю нижний колонтитул карточки точного экземпляра задачи, которую я пытаюсь редактировать. Я хотел бы знать, есть ли альтернативы этому (первая строка функции). Потому что, если бы мои элементы были глубоко вложены, было бы сложно выбрать родственный узел.

Answer 1

Ну, есть два варианта.

1. По родному javascript и реагировать, вы можете передавать переменную при вызове своей функции, т.е. (editTodo(myIdVar)). Вам необходимо создать уникальный идентификатор c ID (перед возвратом), передать его на свой editTodo, а затем использовать его для поиска по идентификатору (document.getElementById('myUniqueId')). Это лучшее решение, потому что оно будет напрямую указывать на конкретный элемент c, однако для этого вам понадобится уникальный идентификатор.
2. Вы втягиваете jQuery, и у него есть родительская функция, которая поднимается вверх для особого тега c (т.е. $(element).parent('div.myclass') будет искать тег div с классом myclass), после чего вы можете go вниз, выбрав класс или указав дочерний элемент. Вы можете получить element, обернув e.target как $(e.target) или любой другой Javascript объект DOM. Это решение не требует уникального идентификатора, оно более динамично c, чем ваше решение, но требует немного больше времени для выполнения.