Wie erstelle ich Links (oder übergebe irgendein anderes html/jsx) in das Label der Material-UI <Checkbox ... label = "string" /> Komponente

Ich bin auf der Suche nach einem Einblick, wie man benutzerdefinierte jsx übergeben kann in das Label der Checkbox-Komponente.Wie erstelle ich Links (oder übergebe irgendein anderes html/jsx) in das Label der Material-UI <Checkbox ... label = "string" /> Komponente

<Checkbox 
    label="I accept the Terms of Use & Privacy Policy" 
/>

Idealerweise würde machen, was als das Etikett ist, wo die Elemente in den Klammern sind Links „Ich habe die [AGB] & [Datenschutz] akzeptieren“.

Vielen Dank im Voraus für jede Hilfe!

Quelle

2016-08-02 Michael Stearn

Sie in anderen jsx Knoten in die Eigenschaft label passieren kann. In diesem Beispiel verwende ich den React Router-Link, aber Sie könnten natürlich ein Ankerelement verwenden.

<Checkbox 
    label={ 
    <div> 
     <span>I accept the </span> 
     <Link to={'/terms'}>terms of use</Link> 
     <span> and </span> 
     <Link to={'/privacy'}>privacy policy</Link> 
    </div> 
    } 
/>

Quelle

2016-08-03 10:11:53

Jeroen, Das war genau die Lösung, nach der ich gesucht habe. Beide Methoden, die Sie vorgeschlagen haben, haben funktioniert. Die Dokumentation auf der Website von Material-UI ist ziemlich spärlich in Bezug auf verschiedene Komponenten, so dass du mir so viel Zeit und Mühe ersparst hast! Danke für die Antwort! –

@michaelmuxica außer die Links sind nicht anklickbar, oder? – Ludo

Sie sind/sollten anklickbar sein. Hast du das versucht und es hat nicht funktioniert? –

<html> 
<head> 
</head> 
<body> 
<form method="post" action="demo_form.php"> 
I accept the Terms of Use & Privacy Policy 
<input type="Checkbox" name="terms"> 
</form> 
</body> 
</html>

demo_form.php

<?php 
echo 'Hello ' . htmlspecialchars($_POST["terms"]) . '!'; 
?>

Quelle

2016-08-02 17:19:37

Jeffrey wurde diese Frage speziell auf die Verwendung der UI-Material-React.js Basis bezogen. Nicht PHP. Danke, dass du versucht hast zu helfen. –

Sie können HTML in der Eigenschaft label verwenden. Aber Sie werden ein Problem haben: Die Komponente wird von einer transparenten Eingabe "abgedeckt", die jeden Klick verarbeitet. So werden Links oder onClicks nicht funktionieren. Bevor die Bibliothek Entwickler das Problem beheben, können Sie verwenden:

<Checkbox id={uniqueId} 
     labelStyle={{ zIndex: 3 }} 
     label={(
       <label htmlFor={uniqueId}> 
          blah blah 
          <span onClick={this.myAction}>yeah</span> 
          <a>...</a> 
       </label> 
    )}/>

Einzelheiten hier =>https://github.com/callemall/material-ui/issues/5364

Quelle

2017-06-01 16:14:05 mlorber

Wie erstelle ich Links (oder übergebe irgendein anderes html/jsx) in das Label der Material-UI <Checkbox ... label = "string" /> Komponente

Antwort

Verwandte Themen