カスタムjsxを渡す方法の洞察を探していますCheckboxコンポーネントのラベルに追加します。ラベルは、カッコ内の項目がリンクされている「私は[利用規約] & [プライバシーポリシー]を受け入れる」であるとしてレンダリングするであろうものが理想的Material-UI <Checkbox ... label = "string" />コンポーネントのラベルにリンクを作成する（または他のhtml/jsxを渡す）
<Checkbox
label="I accept the Terms of Use & Privacy Policy"
/>
。
ありがとうございました！
あなたはlabelプロパティに他のJSXノードに渡すことができます。この例では、React Routerリンクを使用していますが、もちろんアンカー要素を使用することもできます。
<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>
}
/>
<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"]) . '!';
?>
ジェフリーが、この質問を具体的にReact.js系材料-UIの使用に関連していました。 PHPではありません。しかし、助けてくれてありがとう。 –
labelプロパティでhtmlを使用できます。しかし、コンポーネントには問題があります。コンポーネントは、すべてのクリックを処理する透明な入力によって「カバー」されます。リンクやonClicksは機能しません。ライブラリの開発者が問題を解決する前に、あなたが使用することができます。ここ
<Checkbox id={uniqueId}
labelStyle={{ zIndex: 3 }}
label={(
<label htmlFor={uniqueId}>
blah blah
<span onClick={this.myAction}>yeah</span>
<a>...</a>
</label>
)}/>
Jeroen、これはまさに私が探していた解決策でした。あなたが提案した両方の方法が働いた。 Material-UIのサイトのドキュメントは、さまざまなコンポーネントでこれを行うという点でかなり疎ですので、時間と労力を節約できました。回答ありがとうございます！ –
@michaelmuxicaリンクはクリックできないことを除いて、右か？ – Ludo
クリック可能です。これを試してもうまくいきませんでしたか？ –