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

Dostaję parę błedów i nie wiem jak je rozwiązać {react}

VPS Starter Arubacloud
0 głosów
136 wizyt
pytanie zadane 13 maja 2022 w JavaScript przez chrystian Gaduła (4,780 p.)
edycja 13 maja 2022 przez chrystian

Editt: Pierwszy przy wpisywaniu do inputów // rozwiązany

A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. 

:drugi po submit i nie wyświetla się product  

Form submission canceled because the form is not connected

kod 

import React, { useRef, useState } from "react";

function Navbar() {
	const [random, setRandom] = useState(Math.floor(Math.random() * 50 + 10) / 10);
	const productRef = useRef(null);
	const [option, setOption] = useState(false);

	let Invoke = () => {};
	const [productNum, setProductNum] = useState(0);
	const [temp, setTemp] = useState({
		campaignName: "",
		keywords: "",
		bigAmount: "",
		campaignFound: "",
		onOff: false,
		town: "",
		radius: "",
	});
	const [product, setProduct] = useState({
		campaignName: "",
		keywords: "",
		bigAmount: "",
		campaignFound: "",
		onOff: false,
		town: "",
		radius: "",
	});
	const contractors = () => {
		setOption(!option);
	};
	const Submit = () => {
		// onCardAdd(product);
		setTemp((temp) => {
			temp = product;
		});

		setProduct(
			(product) =>
				(product = {
					campaignName: "",
					keywords: "",
					bigAmount: "",
					campaignFound: "",
					onOff: false,
					town: "",
					radius: "",
				})
		);
		setOption(option);
		var today = new Date();
		var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();

		//przypisz value z p do inputów
		console.log("edited" + "product num" + time);
		setOption(!option);

		Invoke = () => {
			setProductNum((productNum) => productNum++);
			return (
				<div className="product">
					<div className="product--style">
						<h4>Product {productNum} </h4>
						<button className="product--show" onClick={show}>
							&#8744;
						</button>
						<button className="product--edit" onClick={edit}>
							&#x270E;
						</button>
						<button className="product--delete" onClick={del}>
							&#x2718;
						</button>
						<div className="show-text" ref={productRef}>
							<p>Capmaing Name {temp.campaignName}</p>
							<p>keyword {temp.keywords}</p>
							<p>Big amount {temp.campaignName}</p>
							<p>Campaing found {random - temp.campaignFound}</p>
							<p>ON/OFF {temp.onOff}</p>
							<p>Town {temp.town}</p>
							<p>Radius {temp.radius}</p>
						</div>
					</div>
				</div>
			);
		};
	};
	const inputChange = ({ target }) => {
		const inputId = target.dataset.identity;
		setProduct((product) => ({
			...product,
			[inputId]: target.value,
		}));
	};

	const show = () => {
		productRef.current.classList.toggle("show-text");
	};
	const del = () => {
		var today = new Date();
		var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
		console.log("edited " + "product num  " + time);
		setOption(!option);
		//usuń produkt
	};
	const edit = () => {
		var today = new Date();
		var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();

		//przypisz value z p do inputów
		console.log("edited" + "product num " + time);
		setOption(!option);
	};
	return (
		<nav className="navbar">
			<button className="nav-button-contractors" onClick={contractors}>
				Add new Product
			</button>

			{option === true ? (
				<div className="modal">
					<form className="main--form" onSubmit={Submit}>
						<input className="form--input" placeholder="Campaign Name" onChange={inputChange} value={product.campaignName} data-identity="campaignName" required></input>
						<input className="form--input" placeholder="Keywords" onChange={inputChange} value={product.keywords} data-identity="keywords" required></input>
						<input className="form--input" placeholder="Big amount" onChange={inputChange} value={product.bigAmount} data-identity="bigAmount" required></input>
						<input className="form--input" placeholder="Campaing found" onChange={inputChange} value={product.campaignFound} data-identity="campaignFound" required></input>
						<label>Status ON</label>
						<input type="checkbox" onChange={inputChange} value={product.onOff} data-identity="onOff" required></input>
						<select className="form--input" onChange={inputChange} value={product.town} data-identity="town" required>
							<option>Cracow</option>
							<option>Warsaw</option>
							<option>Rzeszów</option>
							<option>Gdańsk</option>
						</select>
						<input className="form--input" placeholder="Radius" onChange={inputChange} value={product.radius} data-identity="radius" required></input>
						<input className="form--input" type="submit" onChange={inputChange} value="Send"></input>
					</form>
				</div>
			) : (
				<div>
					<h1>Products</h1>
					<div className="product--container">
						<Invoke />
					</div>
				</div>
			)}
		</nav>
	);
}

export default Navbar;

 

komentarz 13 maja 2022 przez chrystian Gaduła (4,780 p.)
prevenDefult usuwa drugi bład lecz nadal nie towrzy mi nowego produktu

1 odpowiedź

0 głosów
odpowiedź 13 maja 2022 przez rafal.budzis Szeryf (85,260 p.)
wybrane 15 maja 2022 przez chrystian
 
Najlepsza

A może użyj czegoś co ułatwi Ci życie z formularzami? Ja polecam tą libkę : https://www.npmjs.com/package/react-hook-form

Dodatkowo na twoim miejscu zaczął bym się użyć HTMLa bo masz braki. Np Znacznik <button> domyślnie jest typu submit. Jeśli chcesz zeby był tylko przyciskiem ustaw typ 

<button type="button" onClick={() => {}}> Przycisk </button>

Nie stosuj <input type="submit" /> Bo nie wszystko Ci się uda wystylizować w ten sposób. Np nie dodasz do środka <inputa ikonki w SVG a w przypadku <button> już możesz.

PS. Invoke zrób jako osobny komponent !!! Nie rób takich cudów jak tutaj ;P 

Aby stworzyć nowy produkt musisz mieć tablicę 

    const [products, setProducts] = useState([]);

wtedy jesteś w stanie dodać coś do niej imieć wiele elementów.

setProducts((products) =>
     ([
        ...products, 
        {
            campaignName: "",
            keywords: "",
            bigAmount: "",
            campaignFound: "",
            onOff: false,
            town: "",
            radius: "",
        }
    ])
);

Moim zdaniem powinieneś cofnać się o jeden krok i poćwiczyć HTMLa i czystego JSa bo w każdym pytaniu brakuje ci podstaw JSa, a problemy nie dotyczą Reacta. 

komentarz 13 maja 2022 przez chrystian Gaduła (4,780 p.)
Robię to w jednym komponencie bo  projekt jest tak mały wydaje mi się że się nie opłaca

a rozkładając to na komponenty musiał bym tak jak powiedziałeś tworzyć tablice mapować renderComponent a później jeszcze przypinać product do navbara gdzie product container jest już w navbarze
komentarz 13 maja 2022 przez rafal.budzis Szeryf (85,260 p.)
I tak musisz tworzyć tablice. Nie da się tego zrobić bez niej.
komentarz 13 maja 2022 przez chrystian Gaduła (4,780 p.)

czyli

    const [productStuff, setProductStuff] = [];

//w funckji invoke

setProductStuff((prev) => [...prev, component]);

const component = (

                <div className="product">

                    <div className="product--style">

                        <h4>Product {countED} </h4>

                        <button className="product--show" onClick={productRef.current.classList.toggle("show-text")}>

                            &#8744;

                        </button>

                        <button className="product--edit" onClick={edit}>

                            &#x270E;

                        </button>

                        <button className="product--delete" onClick={del}>

                            &#x2718;

                        </button>

                        <div className="show-text" ref={productRef}>

                            <p>Capmaing Name {temp.campaignName}</p>

                            <p>Keyword {temp.keywords}</p>

                            <p>Big amount {temp.campaignName}</p>

                            <p>Campaing found {random - temp.campaignFound}</p>

                            <p>ON/OFF {temp.onOff}</p>

                            <p>Town {temp.town}</p>

                            <p>Radius {temp.radius}km</p>

                        </div>

                    </div>

                </div>

            );

{productStuff.map((productStuff) => {

                            return productStuff;

                        })}

 

Podobne pytania

0 głosów
0 odpowiedzi 127 wizyt
pytanie zadane 5 listopada 2022 w JavaScript przez chrystian Gaduła (4,780 p.)
+1 głos
0 odpowiedzi 217 wizyt
0 głosów
1 odpowiedź 195 wizyt
pytanie zadane 21 kwietnia 2020 w JavaScript przez robertos18 Obywatel (1,120 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...