사용자 정의 jsx를 전달하는 방법에 대한 통찰력을 찾고 있습니다. 확인란 구성 요소의 레이블에 추가합니다.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가 아닙니다. 그러나 도움을 주셔서 감사합니다. –
레이블 속성에 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
클릭 할 수 있어야합니다. 이것을 시도했는데 효과가 없었습니까? –