Question

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

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

理想情况下，作为标签呈现的是“我接受[使用条款]和[隐私政策]”，其中括号内的项目是链接。

提前感谢您的帮助！

Answer 1

您可以将其他jsx节点传入label属性。在这个例子中，我使用的是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>
   }
 />

Answer 2

<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 3

您可以在label属性中使用html。但是你会遇到一个问题：组件被透明输入“覆盖”，可以处理每次点击。因此链接或onClicks将无法正常工作。在库开发人员解决问题之前，您可以使用：

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

此处的详细信息=＆gt; https://github.com/callemall/material-ui/issues/5364

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

3 个答案: