Scynja
Senior Dabei seit: 23.02.2011 Mitteilungen: 591
Wohnort: Deutschland
Beitrag No.1, eingetragen 2022-10-06
Hallo mathletic,
du hast kein Seitenmenü kreiert, sondern eine Variable definiert und exportiert.
Lies dir z. B. das hier durch: https://ui.dev/react-router-tutorial
Es sieht so aus, als wenn dein Problem dort durchgekaut wird.
mathletic
Wenig Aktiv Dabei seit: 11.11.2013 Mitteilungen: 1674
Beitrag No.2, vom Themenstarter, eingetragen 2022-10-07
Ich habe es hinbekommen dass eine neue Seite aufgerufen wird mit ein Inhalt. Was mir jetzt nicht ganz klar ist, wenn man ein DropDown Menu hat wie bekommt man etwas bestimmtes gezeigt wenn z.B. Option 1 gewählt wurde?
Also ich habe folgendes DropDown Menu gemacht :
\sourceon Javascript
import { Select, MenuItem, FormControl, InputLabel } from '@material-ui/core';
import React, { useState } from 'react';
function DDMenu() {
const [selected, setSelected] = useState('');
const selectionChangeHandler = (event) => {
setSelected(event.target.value);
};
return (
Select one of the following options
);
}
export default DDMenu;
\sourceoff
Wenn wir z.B. Option 1 wählen sollte der Inhalt von Option 1 auf der Seite kommen. Macht man es in einer anderen js Datei oder in der gleichen mit switch oder so, z.B. wie folgt?
\sourceon Javascript
switch(value) {
case "1": return
One
;
case "2": return
Two
;
case "3": return
Three
;
case "4": return
Four
;
}
\sourceoff
Oder macht einen neuen Link das dann aufgerufen wird und dieser Link enthält den Inhalt?
Würde man das etwa wie folgt machen?
\sourceon Javascript
\sourceoff
🤔
mathletic
Wenig Aktiv Dabei seit: 11.11.2013 Mitteilungen: 1674
Beitrag No.4, vom Themenstarter, eingetragen 2022-10-07
Bisher habe ich folgendes geschrieben :
\sourceon Javascript
import React, { Component } from 'react';
import Select from '@material-ui/core/Select';
export default function GTMSourceNew() {
const [age, setAge] = React.useState('');
const handleChange = (event) => {
setAge(event.target.value);
};
const handleClick = (param) => {
...
};
return (
);
}
\sourceoff
Ist das bisher richtig? Wie definiert man aber die Funktion const handleClick = (param) ?
Ich habe auch folgendes versucht aber da bekomme ich nichts im Browser:
\sourceon Javascript
import React, { Component } from 'react';
import Select from '@material-ui/core/Select';
export default function GTMSourceNew() {
const [age, setAge] = React.useState('');
const handleChange = (event) => {
setAge(event.target.value);
};
const handleClick = (event) => {
setIsVisible((current) => !current);
};
return (
);
}
\sourceoff
Macht man so dass etwas hidden ist und wenn man auf den Button clicked dann wird es visible?
Scynja
Senior Dabei seit: 23.02.2011 Mitteilungen: 591
Wohnort: Deutschland
Beitrag No.5, eingetragen 2022-10-07
\quoteon(2022-10-07 12:39 - mathletic in Beitrag No. 2)
\sourceon Javascript
\sourceoff
🤔
\quoteoff
Das ist code aus den 90ern, den man bei SPAs nicht nutzt. Man kann das aber nutzen, um beispielsweise einen Download zu starten.
\quoteon(2022-10-07 12:39 - mathletic in Beitrag No. 2)
Wenn wir z.B. Option 1 wählen sollte der Inhalt von Option 1 auf der Seite kommen. Macht man es in einer anderen js Datei oder in der gleichen mit switch oder so, z.B. wie folgt?
\sourceon Javascript
switch(value) {
case "1": return
One
;
case "2": return
Two
;
case "3": return
Three
;
case "4": return
Four
;
}
\sourceoff
\quoteoff
Das sieht falsch aus. Neue Datei oder gleiche Datei hängt davon ab wie viel man anzeigen möchte und ob man etwas wiederverwenden kann. Das kann man pauschal nicht sagen. Versuche die Dateien kleiner als 200-500 Zeilen zu halten.
Ich würde wahrscheinlich eine Variable definieren und diese dann setzen. In der Renderfunktion kann man dann mit
\sourceon jsx
{this.myVar &&
...
}
\sourceoff
den Block schreiben. Man kann die Sachen auch auslagern und dann z. B.
\sourceon jsx
const myButton =
);
}
\sourceoff
Ist das bisher richtig? Wie definiert man aber die Funktion const handleClick = (param) ?
\quoteoff
Das kommt drauf an. Man kann mit router.push('url') (Doku nachschlagen) arbeiten, man kann eine Variable setzen und bestimmt noch viel mehr.
\quoteon(2022-10-07 17:22 - mathletic in Beitrag No. 4)
Ich habe auch folgendes versucht aber da bekomme ich nichts im Browser:
\sourceon Javascript
import React, { Component } from 'react';
import Select from '@material-ui/core/Select';
export default function GTMSourceNew() {
const [age, setAge] = React.useState('');
const handleChange = (event) => {
setAge(event.target.value);
};
const handleClick = (event) => {
setIsVisible((current) => !current);
};
return (
);
}
\sourceoff
Macht man so dass etwas hidden ist und wenn man auf den Button clicked dann wird es visible?
\quoteoff
Zunächst einmal ist isVisible in vielen Fällen ein schlechter Name. Ich würde es wahrscheinlich aus dem DOM schmeißen, indem ich es nicht rendere. Aber display: none und visibility haben durchaus ihre Berechtigung. Es kommt auf den UseCase an.
handleClick ist ebenfalls ein miserabler Name einer Funktion.
mathletic
Wenig Aktiv Dabei seit: 11.11.2013 Mitteilungen: 1674
Beitrag No.6, vom Themenstarter, eingetragen 2022-10-08
\quoteon(2022-10-07 22:01 - Scynja in Beitrag No. 5)
Neue Datei oder gleiche Datei hängt davon ab wie viel man anzeigen möchte und ob man etwas wiederverwenden kann. Das kann man pauschal nicht sagen. Versuche die Dateien kleiner als 200-500 Zeilen zu halten.
\quoteoff
Ich will für jede Option 4 oder 5 Kästchen machen. Was ist in diesem Fall empfehlenswert? Neue Datei oder die gleiche?
\quoteon(2022-10-07 22:01 - Scynja in Beitrag No. 5)
Ich würde wahrscheinlich eine Variable definieren und diese dann setzen. In der Renderfunktion kann man dann mit
\sourceon jsx
{this.myVar &&
...
}
\sourceoff
den Block schreiben. Man kann die Sachen auch auslagern und dann z. B.
\sourceon jsx
const myButton =
..
return (<>
Headline
{this.myVar && myButton}
)
\sourceoff
schreiben.
\quoteoff
Die Renderfunktion ist die Funktion die man dann in jeder Funktion benutzen kann, oder?
\quoteon(2022-10-07 22:01 - Scynja in Beitrag No. 5)
Das kommt drauf an. Man kann mit router.push('url') (Doku nachschlagen) arbeiten, man kann eine Variable setzen und bestimmt noch viel mehr.
\quoteoff
Das wäre dann das man in einen anderen URL landet, oder? Was kann man tun um beim gleichen URL zu bleiben?
\quoteon(2022-10-07 17:22 - mathletic in Beitrag No. 4)
Zunächst einmal ist isVisible in vielen Fällen ein schlechter Name. Ich würde es wahrscheinlich aus dem DOM schmeißen, indem ich es nicht rendere. Aber display: none und visibility haben durchaus ihre Berechtigung. Es kommt auf den UseCase an.
handleClick ist ebenfalls ein miserabler Name einer Funktion.
\quoteoff
Also meinst du es irgendwie wie in diesen Link ?
Home / Seite ohne Frame
Wie unterstütze ich den Matheplaneten mit Geld?
Themenstart: 2022-10-06
Profil
