Как я могу постоянно добавлять элемент HTML в JSX? (Реагировать)


function sample () {

return (

<div>

<input/>
<input/>
<input/>
.
.
?

<button onClick={ ? ? ? ? }> ADD NEW INPUT <button>

</div>

)}

Давайте представим, что мы работаем над этим кодом. Здесь нажав тег кнопки «ДОБАВИТЬ НОВЫЙ ВХОД», я хочу ввести тег, чтобы сохранить его.

Я искал createElement() и appendChild(), но все, что я могу сделать, это добавить только 1 элемент HTML к существующему.

Я хочу знать, как мы можем создать функцию или настроить логику для решения такого рода проблем.

Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
1
0
31
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий
  const [input, setInput] = useState([<input defaultValue={1} />]);
  return (
    <div>
      {input.map((item) => (
        <div>{item}</div>
      ))}
      <button
        className="block p-5 mx-4 rounded-lg bg-emerald-600"
        onClick={() => {
          setInput([...input, <input defaultValue={input.length + 1} />]);
        }}
      >
        Append
      </button>
    </div>
  );

Вы можете проверить приведенную ниже реализацию

import React, { useState } from "react";

const Input = () => <input />; //input component

const Component = () => {
  const [inputs, setInputs] = useState([]); //create a state to keep all generated inputs

  return (
    <div>
      //re-render all inputs whenever we have a new input
      {inputs.map((Input, index) => (
        <Input key={index} />
      ))}
      //set a new input into the input list
      <button onClick={() => setInputs([...inputs, Input])}>Generate input</button>
    </div>
  );
};

export function App() {
  return <Component />;
};

Вот игровая площадка

Спасибо, что поделились информацией, Ник! Так мило :) :)

Aden Lee 09.04.2022 20:06

Не за что!~

Nick Vu 09.04.2022 20:06

Другие вопросы по теме