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

Jakiś wskazówki do czego spasować id by kilknięty button znikał tylko current note(boollean) {react}

Aruba Cloud PRO i VPS, Openstack, VMWare, MS Hyper-V
0 głosów
62 wizyt
pytanie zadane 29 października 2022 w JavaScript przez chrystian Gaduła (4,690 p.)

Prosiłbym o wskazówkę gdzie i jak match id by button o tym samym id zamykał jedynie siblinga(textarea) o tym samym id

Kod z  App

	{[...Array(noteID).keys()].map((item) => {
				return <Notes key={item} noteID={item} Shown={show} toggle={() => SetShow(!show)} />;
			})}

Notes 

function Notes(props) {
	return (
		<div key={props.noteID}>
			{props.Shown ? <textarea key={props.noteID} placeholder="Text Goes Here" /> : null}
			<button key={`Note` + props.noteID} onClick={props.toggle}>
				Note {props.noteID + 1}
			</button>
		</div>
	);
}
export default Notes;

 

komentarz 29 października 2022 przez chrystian Gaduła (4,690 p.)
edycja 29 października 2022 przez chrystian

Jak dostać się do

e.target (element key)
import { useState } from "react";

function Notes(props) {
	const [Shown, setShown] = useState(true);

	function toggle(e) {
		const textarea = e.target.textarea;
		const button = e.target.button;

		console.log(`textare: ${textarea}, button: ${button}`);
		e.preventDefault();
		setShown(!Shown);
	}

	return (
		<form action="return false" key={props.noteID} onSubmit={toggle}>
			{Shown ? <textarea key={props.noteID} placeholder="Text Goes Here" name="textarea" /> : null}
			<button key={`Note` + props.noteID} type="submit" name="button">
				Note {props.noteID + 1}
			</button>
		</form>
	);
}
export default Notes;

if(textarea(key)===button(key){

setShown(!Shown);

)

 

komentarz 30 października 2022 przez ScriptyChris Mędrzec (190,440 p.)

Czy możesz czytelniej opisać swój problem? Chcesz usunąć textarea na kliknięcie w przycisk - w jakim celu?

komentarz 31 października 2022 przez chrystian Gaduła (4,690 p.)
Togglować na przycisk. By dany przycisk zamykał jedynie swojego "Brata"

1 odpowiedź

0 głosów
odpowiedź 31 października 2022 przez chrystian Gaduła (4,690 p.)
edycja 31 października 2022 przez chrystian

Przycisk zamykał jedynie swojego siblinga (textarea) rowiązanie jest pod spodem. Przeniosłem kilk na forma i on toggle textarea

Jedna notka

function Notes(props) {
	const [Shown, setShown] = useState(props.show);

	function toggle(e) {
		e.preventDefault();
		setShown(!Shown);
	}

	return (
		<form action="return false" key={props.noteID} onSubmit={toggle}>
			{Shown ? <textarea key={props.noteID} placeholder="Text Goes Here" name="textarea" /> : null}
			<button key={`Note` + props.noteID} type="submit" name="button" onClick={props.selected}>
				Note {props.noteID + 1}
			</button>
		</form>
	);
}

Tablica Notek

import { react, useState } from "react";
import Notes from "./Notes";
function Notepad() {
	const [noteID, setNoteID] = useState(0);
	const [visible, SetVisible] = useState(false);
	function handleSubmit(e) {
		e.preventDefault();
		setNoteID((prevValue) => prevValue + 1);
	}
	function currentNote(e) {
		e.preventDefault();
	}
	return (
		<div>
			<button onClick={handleSubmit}>New Note</button>
			{[...Array(noteID).keys()].map((item) => {
				return <Notes key={item} noteID={item} selected={currentNote} show={visible} />;
			})}
		</div>
	);
}
export default Notepad;

 

Podobne pytania

0 głosów
1 odpowiedź 56 wizyt
+1 głos
2 odpowiedzi 183 wizyt
pytanie zadane 29 maja 2021 w JavaScript przez ShockWave Bywalec (2,350 p.)
0 głosów
1 odpowiedź 121 wizyt
pytanie zadane 13 września 2018 w JavaScript przez Apper97 Obywatel (1,380 p.)

90,303 zapytań

138,899 odpowiedzi

311,088 komentarzy

60,017 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.

...