Как по клику по кнопке передать DOM элемент в родительский компонент?

Question

[Antono__88]

У меня есть таблица с элементами (tr), которые содержат информацию о данном элементе, input и кнопку. По щелчку у меня получается передать значения input, но я хочу чтобы передался весь элемент (tr) в родительский компонент. Как это сделать?

Дочерний компонент

const [title, setTitle] = useState('');

const handleSubmit = (e) => {
		e.preventDefault();
		addSong(title);
		setTitle('');
	};

<table className="table table-bordered">
						<TableHeader headers={headers} />
						<tbody>
							{commentsData.map((comment) => (
								<tr key={comment.id}>
									<th scope="row">{comment.id}</th>
									<th className="col-sm-2">{comment.name}</th>
									<th className="col-sm-3">{comment.email}</th>
									<th className="d-flex align-middle justify-content-center">
										<form onSubmit={handleSubmit}>
											<fieldset>
												<input
													type="text"
													className="form-control mr-sm-8 mb-4"
													value={title}
													onChange={(e) => setTitle(e.target.value)}
												/>
												<button
													className="btn btn-info col-sm-12"
													onClick={handleClose}
												>
													Seleziona quantit&agrave;
												</button>
											</fieldset>
										</form>
									</th>
								</tr>
							))}
						</tbody>
					</table>

Родительский компонент

В нем хочу отрендерить строчку (tr) с элементами из дочернего элемента.

function App() {
	const addSong = (title) => {
		// @ts-ignore
		setSongs([{ title }]);
	};
	const [songs, setSongs] = useState([]);
	return (
		<div className="container">
			<Modale addSong={addSong} />
			<div className="song-list">
				<table>
					{songs.map((song, index) => {
						return (
							<tr key={index}>
								<td>{song.title}</td>
							</tr>
						);
					})}
				</table>
			</div>
		</div>
	);
}

export default App;

Answer 1

[Andrew Ghostuhin]

import { useRef } from "react";

const Item = ({ element, renderIn }) => {
  const node = useRef(null);

  const chooseThis = (event) => {
    renderIn.current.appendChild(node.current);
  };

  return (
    <li onClick={chooseThis}>
      <h1 ref={node}>{element}</h1>
    </li>
  );
};

const List = ({ elements, renderIn }) => (
  <ul>
    {elements.map((element) => (
      <Item element={element} renderIn={renderIn} />
    ))}
  </ul>
);

const App = () => {
  const elements = ["one", "two", "three"];
  const renderIn = useRef(null);

  return (
    <>
      <h1>
        Chosen one: <div style={{ color: "red" }} ref={renderIn}></div>
      </h1>
      <List elements={elements} renderIn={renderIn} />
    </>
  );
};
export default App;

elements - массив строк, элементы для отрисовки
renderIn - реф на ноду в которой будем отрисовывать выбранный элемент
List - ul который рендерит Item для каждого элемента из elements, принимает renderIn реф чтобы прокинуть его в Item
Item - li в котором создаётся h1 с содержимым элемента, внутри него инициализируется реф на h1, когда мы кликаем на li средствами DOM’а в ноду на которую указывает renderIn добавляется соответствующий h1 (для большей наглядности у блока в котором все рендерится в стилях color: ‘red’, он и применяется чилдренам)

Comments

[Antono__88]

Спасибо Вам большое!