Verwandte Themen

BetaFactory
25.05.2021, 18:58
React .filter/.map "Cannot read property 'handleClick' of undefined"?

Guten Abend,

ich mach eine kleine Function in JS und React und hab ein Fehler den ich nicht verstehe:

In dem Codestück funktioniert es aber der ist nicht so wie ich es brauche. Hier findet er aber die Funktion, bei dem unteren der was die Command handleClick funktion betrifft. Findet er sie nicht

    let itemList = this.props.items.map(item => {
      console.log(item.id);
      return (
        <FoodCategoryItem
          preis={item.price}
          label={item.title}
          text={item.desc}
          key={item.id}
          Command={() => { this.handleClick(item.id) }}
          source={item.img} />


      )
    })

und mit diesem gibt es fehler das die handeclick function undefined ist

    let itemList = this.props.items.filter(function (item) {
      return item.menuid === 'menuid_salat_2222';
    }).map(function ({ id, title, desc, price, img }) {
      
      console.log((id))


      return (
        <FoodCategoryItem
          preis={price}
          label={title}
          text={desc}
          key={id}
          Command={() => { this.handleClick(id) }}
          source={img} />
      )
    });

Also die Items sollen gefiltert werden funktioniert auch aber dann funktioniert der Command mit handleclick nicht mehr

diese Fehlermeldung kommt dann:

TypeError: Cannot read property 'handleClick' of undefined

Computer, Webseite, programmieren, JavaScript, React
2 Antworten
ashuraRog
16.05.2021, 17:48
Mit Links
Wie zeichne ich einen Graph in Javascript D3.js?

Ich möchte ein Graphendiagramm erstellen. Dazu habe ich eine JSON-Datei erstellt. Die Skills ("java, python, HTML, json") sind die Knoten und die Indexe (KayO, BenBeck, Borea usw.) sind die Kanten. Der Knoten muss eine Mindestgröße haben und darf nicht zu groß werden. Anschließend möchte ich mit einem Klick auf den Knoten die Liste der Publikationen auf der rechten Seite aufrufen können. Dabei soll der aktuell ausgewählte Knoten in der Visualisierung hervorgehoben werden. Ich habe bereits aus diesem Beispiel (https://bl.ocks.org/heybignick/3faf257bbbbc7743bb72310d03b86ee8) was implementiert. Aber leider komme ich nicht weiter.

Diese ist meine JSON Datei:

const persona = {
    "KayO": {
      firstname: "Kay",
      lastname: "Ohran",
      City: "California",
      skills: "java, python, HTML, json",
    },
    BenBeck: {
      firstname: "Ben",
      lastname: "Beckamm",
      City: "New York",
      skills: "css, ruby, php, training, simulator, java, web, webgl, json",
    };

Das ist mein Code

    const bib = persona;
    console.table(bib);
    const graph = {nodes: [{id: "a"}, {id: "b"}], links: [{source: "a", target: "b"}]};
    const linkColor = d3.scaleLinear().domain([0, 1]).range(["#eee", "#000"]);

    const svg = d3.select("svg");
    const width = +svg.attr("width");
    const height = +svg.attr("height");

    const simulation = d3
      .forceSimulation()
      .force("link", d3.forceLink().id(function (d) { return d.id; }))
      .force("charge", d3.forceManyBody())
      .force("center", d3.forceCenter(width / 2, height / 2));

      //linien -> Kanten
      var link = svg.append("g").attr("class", "links")
      .selectAll("line")
      .data(graph.links).enter().append("line")
      .attr("stroke", "#aaa");

      //kreise -> Knoten
    var node = svg.append("g")
      .attr("class", "nodes")
      .selectAll("circle").data(graph.nodes).enter().append("circle")
      .attr("r", 5).call(d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended));

    node.append("title").text(d => d.id);


    simulation.nodes(graph.nodes).on("tick", ticked)
simulation.force("link").links(graph.links);

    function ticked() {
      link
        .attr("x1", d => d.source.x)
        .attr("y1", d => d.source.y)
        .attr("x2", d => d.target.x)
        .attr("y2", d => d.target.y);
      node.attr("cx", d => d.x).attr("cy", d => d.y);
    }

    function dragstarted(event) {
      if (!event.active) simulation.alphaTarget(0.3).restart();
      event.subject.fx = event.subject.x;
      event.subject.fy = event.subject.y;
    }

    function dragged(event) {
      event.subject.fx = event.x;
      event.subject.fy = event.y;
    }

    function dragended(event) {
      if (!event.active) simulation.alphaTarget(0);
      event.subject.fx = null;
      event.subject.fy = null;
    }
programmieren, JavaScript
1 Antwort
Geomatrics1
02.03.2021, 22:13
Mit Bildern
Wie kann ich bei einer richtiger Antwort einen Text anzeigen lassen und bei einer falscher Antwort einen anderen?

 Ich möchte auf meiner Webseite ein kleines Multiple-choice-Quiz machen.

Hier möchte ich, dass, wenn man das Richtige auswählt und auf Lösung klickt, eine Nachricht erscheint, dass dies die richtige Lösung ist. Bei einer falschen dann halt, dass es die falsche Antwort ist.

Ich könnte hier nach action="/Tests/Posts" eine andere Webseite öffnen lassen. Aber dann würde sich ja bei der falschen Antwort und bei der richtigen Antwort das gleiche Fenster öffnen.

<form method="post" action="/Tests/Post">
  <fieldset>
    <legend>Bei Längswellen erfolgt die Schwingung ... Ausbreitungsrichtung.</legend>
    <input type="checkbox" name="schwingung" value="in" onclick="return ValidatePetSelection();">... in ...<br>
    <input type="checkbox" name="schwingung" value="querZur" onclick="return ValidatePetSelection();">... quer zur ...<br>
    <input type="checkbox" name="schwingung" value="Birds" onclick="return ValidatePetSelection();">... gegen ...<br>
    <br>
    <input type="submit" value="Lösung">
  </fieldset>
</form>
<script type="text/javascript">
  function ValidatePetSelection() {
    var checkboxes = document.getElementsByName("schwingung");
    var numberOfCheckedItems = 0;

    for (var i = 0; i < checkboxes.length; i++) {
      if (checkboxes[i].checked)
        numberOfCheckedItems++;
    }

    if (numberOfCheckedItems > 1) {
      alert("Es ist genau eine Antwort richtig.");
      return false;
    }
  }
</script>
Bild zum Beitrag
Computer, Schule, HTML, CSS, JavaScript, Script, checkbox, Multiple Choice
2 Antworten
Asdfgh4
18.02.2021, 13:28
Frage wurde 1 Mal erneut gestellt
Mit Links
Hilfe bei Manifest?

Ich brauche Hilfe bei einem Manifest. Ich mache eine Chrome Erweiterung und jetzt ist sie fertig, nur wenn ich sie in Chrome einstellen will kommt, dass ich von unten immer eine Zeile löschen muss bis das Manifest leer ist, kann mir jemand helfen?

Hier das Manifest

{
  "browser_action": {
   "default_icon": "icons/icon16.png",
   "default_title": "Slither.bot"
  },
  "content_scripts": {
   "js": [ "agario/socket.io.js", "agario/jquery.js", "agario/content.js"],
	 "css": [ "agario/ui.css" ],
   "matches": ["https://slither.io/index.html" , "https://slither.io"],
   "run_at": "document_start"
	,
  "description": "scissors",
  "icons": {
   "128": "icons/icon128.png",
   "16": "icons/icon16.png",
   "48": "icons/icon48.png"
  },
  "background": {
  "scripts": ["agario/jquery.js","agario/back.js"]
  },
  "web_accessible_resources": ["agario/socket.io.js", "agario/agarclient.js", "agario/jquery.js","data/*.json"],
  "manifest_version": 2,
  "name": "Slither.bot",
  "permissions": [ "tabs", "\u003Call_urls>", "cookies", "contextMenus", "unlimitedStorage", "notifications", "storage", "clipboardWrite", "http://*/*", "https://*/*", "webNavigation", "webRequest", "activeTab", "file:///*/", "ws://*/", "wss://*/*", "<all_urls>"],
  "update_url": "https://clients2.google.com/service/update2/crx",
  "version": "5.0.0"
}
Computer, IT, programmieren, JavaScript, Manifest, JSON
2 Antworten
Fxbyy420
05.02.2021, 15:54
Frage wurde 1 Mal erneut gestellt
HTML Formular Input in SQLite Datenbank speichern, (mit NodeJS) wie?

Hallo. Ich möchte den Input eines HTML-Formulars mit Hilfe von Node in eine SQLite Datenbank einfügen.

Mein index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello world!</title>
    <script src="sqlite.js"></script>
</head>
<body>

    <form action="/team_name_url/" method="post">
        <label for="team_name">Enter name: </label>
        <input id="team_name" type="text" name="name_field" value="Default name for team.">
        <input type="submit" value="OK">
    </form>

</body>
</html>

Mein sqlite.js:

const sqlite3 = require('sqlite3');
const db = new sqlite3.Database('./sqlite.db');

let express = require('express');
let app = express();
const bodyParser= require('body-parser');


app.use(bodyParser.urlencoded({extended:true}));

app.post('/',(req,res)=>{
let placeName = req.body.PlaceName; 
});


db.run(`INSERT INTO places (id, name, coords) VALUES(4, ${placeName}, '1234, 5678');`, function(err) {
    if (err) {
        return console.log(err.message);
    }

    console.log(`A row has been inserted with rowid ${this.lastID}`);


});

db.close();
SQL, HTML, programmieren, JavaScript, Datenbank, SQLite, node.js, node
2 Antworten
PeterPuller
15.01.2021, 13:24
Programmieren: Ist es sinnvoll Teilaufgaben in Funktion zu unterteilen?

Hallo,

wenn ich z.B. eine große Funktion habe (hier die main) und dort Teilaufgaben wie z.B. irgendwas komplex zu sortieren in weitere Funktionen unterteile (sort funktion) die aber wirklich nur 1x aufgerufen werden, stellt sich mir die Frage, ob das sinnvoll ist, oder bad practice.

Ich tue das ganze nur aus dem Grund, um den Funktionsablauf übersichtlich zu halten. Letztendlich geht es um die Frage, wie "teuer" (inperformant) ein Funktionsaufruf ist.

Hier BEISPIELCODE kein Sinn dahinter, nur zur Verdeutlichung:

function sort(image, arr) { // Subfunktion
  const min = min_val;
  const max = max_val;
  for (let i = 0; i < arr.length; i++) {
    for (let k = 0; k <= arr[0].length; k++) {
      if (arr[i][k] < min) arr[i][k] = min;
      if (arr[i][k] > max) arr[i][k] = max;
    }
  }
  for (let i = 0; i < image.length; i++) {
    for (let k = 0; k < image[0].length; k++) {
      image[i][k] = arr[parseInt(image[i][k])];
    }
  }
  return image;
}

function main() {
  const array = new Uint8Array(20);
  crypto.getRandomValues(array);
  const arrayEncoded =  btoa(String.fromCharCode(...array)).split('');
  const arrayFiltered = arrayEncoded.filter(value => {
    switch (value){
    case "+" :
        return false;
    case "/" :
        return false;
    case "=" :
        return false;
    default :
      return true;
    }
  });
  const sortedArray = sort(arrayFiltered, arrayEncoded) // Hier wird unterfunktion aufgerufen
  var arr = new Uint8Array((sortedArray || 40) / 2)
  window.crypto.getRandomValues(arr)
  return Array.from(arr, dec2hex).join('')
}

Versucht nicht, den Code zu verstehen, es sind einfach nur zusammengewürfelte Zeilen von irgendwo.

programmieren, JavaScript, Informatik
7 Antworten

Meistgelesene Fragen zum Thema JavaScript
Mehr meistgelesene Fragen zu JavaScript