无法在reactjs的输入元素内添加链接和标签答案

【问题标题】：Cannot add link and label inside an input element in reactjs无法在reactjs的输入元素内添加链接和标签
【发布时间】：2023-04-03 10:11:01
【问题描述】：

我需要在 reactjs 组件中添加一个链接和标签 inside 输入元素。以下是我所拥有的：

render() {
  return(
    <div className="login-panel-page">
      <input type="password" id="password"
             name="password" value="" placeholder="Password" maxLength="255" autoCapitalize="off">
        <label htmlFor="password">Password</label>
        <a>Show password</a>
      </input>
    </div>
  )
}

但这是我得到的：

bundle.js:9179 Uncaught 
Error: input is a void element tag 
and must neitherhave `children` nor use `dangerouslySetInnerHTML`. 
Check the render method of Login.

谁能帮助我实现这一目标？

【问题讨论】：

React 帮助您避免编写无效标记。 Input 标签不能有孩子。这是一个如何使用输入和标签的指南 - developer.mozilla.org/en-US/docs/Learn/HTML/Forms/…
@hamed-minaee，你看过下面的链接吗：stackoverflow.com/questions/22752116/react-label-element
@salman.zare 是的，但标签将在输入之外
@salman.zare 我认为唯一的方法就是通过 css

标签： reactjs

【解决方案1】：

输入不能有子，你可以这样做

参考：https://github.com/facebook/react/issues/6241

 render() {
    return (
    <div className="login-panel-page">
                    <input type="password" id="password" name="password" value="" placeholder="Password" maxLength="255" autoCapitalize="off"/>
                    <label htmlFor="password">Password</label>
                    <a href="#">Show password</a>

    </div>
    )

【讨论】：