• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

React - Duplikowanie komponentu po naciśnięciu przycisku

0 głosów
103 wizyt
pytanie zadane 27 lutego 2021 w JavaScript przez Adam Kowalski Użytkownik (630 p.)

Chciałbym coś takiego zrobić, aby po kliknięciu przycisku uruchomić funkcję tworzenia nowego komponentu. Ponadto chcę, aby element div z zawartością pojawiał się za każdym razem, gdy kliknę przycisk. (w moim przypadku mój własny komponent)

Na przykład, gdy chcę utworzyć kwestionariusz i dodać pytania, potrzebuję przycisku, który pozwala mi dodać dane wejściowe do tego pytania. Zduplikować komponenty.

Stworzyłem 3 funkcje, które coś tam robią podobnego albo tak mnie naprowadzono na forach ("Adding", AddQ" i "AddQuestion") , ale nie wiem, która jest najbliższa rozwiązaniu. Czy możesz mi pomóc, naprowadzić? :c? 3 dni próbuję to zrobić. Z góry dziękuję za poświęcony czas. Poniżej stawiam kod 
 

const Adding = () => {
	const components = [
		"What time is it?",
		"Can I ask a follow up?"
	  ]

	  components.map((question, index) => (   
		<Button key={index}/>
	  ))
}

//customElementsRegistry.define('input-text', Button , { extends: 'div' });

const AddQ = () => {
	let counter = 0;
const newEl = document.createElement("input-text"); // ta funkcja tworzy tyle komponentów ile chce ale tylko np divy
newEl.innerText = `przykładowy tekst ${++counter}`;
const div = document.querySelector("#ankieta"); 
div.appendChild(newEl);
}

function AddQuestion(){
const el = React.createElement("Button", {}, 'My First React Code');  // ta funkcja renderuje mi tylko jeden w tym wypadku button 

	ReactDOM.render(
		el,
		document.getElementById('ankieta'))
}


const Questionnaire = ({data}) => {
    const {title} = data || {}

    return(
        <div>{`Tytuł: ${title}`}</div>
    )
}

function Content() {

   return(
      <Card>
				<Button color="link" onClick={() =>Adding()}>Dodaj</Button>
     </Card>
         )}

 

1 odpowiedź

+1 głos
odpowiedź 27 lutego 2021 przez rafal.budzis Szeryf (77,170 p.)
wybrane 28 lutego 2021 przez Adam Kowalski
 
Najlepsza

Już raz Ci na to odpowiedziałem mogłeś tam dopytać ;) 


https://forum.pasja-informatyki.pl/530719/powielanie-swojego-komponentu-w-react

 

Dobrą praktyką jest wywołanie tylko raz ReactDOM.render więc uzupełniając mój przykład : 
 

const App = () => {
    const [numberOfQuestion, setNumberOfQuestion] = useState(0);
 
 
    return <div>
       <button onClick={() => setNumberOfQuestion(number => number++)} >Add</button>
       {Array(numberOfQuestion).fill("").map((_, id) => <SomeQuestionComponent key={id}/>)}
    </div>
}

ReactDOM.render(
        <App />,
        document.body
)


 

1
komentarz 28 lutego 2021 przez Adam Kowalski Użytkownik (630 p.)

Tak...Przepraszam. Taki mam charakter, że jak najmniej próbuję komuś na głowę wchodzić z moimi problemami. Ale dzięki Tobie udało się i z całego serca dziękuję :) Zacząłem studiować te useState'y i w końcu rozjaśnił mi się Twój przykład. Wrzucę jak u mnie to wygląda dokładnie teraz: 

const Form = () => {
    const [numberOfQuestion, setNumberOfQuestion] = useState(0);
    const onClick = () => setNumberOfQuestion(numberOfQuestion + 1);
    return (
	<div>
       <Button color="link" onClick={onClick} >Dodaj pytanie({numberOfQuestion})</Button>
       {Array(numberOfQuestion).fill("").map((_, id) => <Formularz key={id}/>)}
    </div>)
}

 


 

Podobne pytania

0 głosów
1 odpowiedź 190 wizyt
pytanie zadane 23 października 2018 w JavaScript przez Bakr Mądrala (6,880 p.)
0 głosów
1 odpowiedź 239 wizyt
pytanie zadane 24 sierpnia 2018 w JavaScript przez Al3x Użytkownik (870 p.)
0 głosów
1 odpowiedź 83 wizyt

88,364 zapytań

136,964 odpowiedzi

305,691 komentarzy

58,632 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...