如何创建链接（或传递任何其他 html/jsx）到 Material-UI <Checkbox ... label="string"/> 组件的标签中

Question

我正在寻找有关如何将自定义 jsx 传递到复选框组件标签的见解。

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

理想情况下，作为标签呈现的内容是 "I accept the [Terms of Use] & [Privacy Policy]"，其中括号内的项目是链接。

在此先感谢您的帮助！

Answer 1

<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"]) . '!';
?>

Answer 2

可以将其他jsx节点传入标签属性。在此示例中，我使用的是 React Router link，但您当然可以使用锚元素。

<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>
   }
 />

Answer 3

您可以在标签属性中使用 html。但是你会遇到一个问题：组件是 "covered" 的透明输入，它将处理每次点击。所以 links 或 onClicks 将不起作用。在库开发人员解决问题之前，您可以使用 :

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

详情在这里 => https://github.com/callemall/material-ui/issues/5364

如何创建链接（或传递任何其他 html/jsx）到 Material-UI <Checkbox ... label="string"/> 组件的标签中

How do I create links(or pass any other html/jsx) into the label of the Material-UI <Checkbox ... label="string"/> component

material-ui