面临错误：输入是一个空元素标签，既不能有 `children`，也不能使用 `dangerouslySetInnerHTML`。在创建一个简单的表单时答案

【问题标题】：Facing Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`. while creating a simple form面临错误：输入是一个空元素标签，既不能有 `children`，也不能使用 `dangerouslySetInnerHTML`。在创建一个简单的表单时
【发布时间】：2021-04-08 07:46:55
【问题描述】：

我正在学习 ReactJS。我正在 React 中创建一个简单的表单。这是我的登录组件：

function Login() {
    return (
        <div className="card login-container">
            <form id="login">
                <label><input name="email" className="email" placeholder="Email" type="text"></input></label>
                <label><input name="password" className="password" placeholder="Password" type="password"></input></label>
                <label><input type="submit" className="btn btn-submit">Submit</input></label>
            </form>
        </div>
    )
}

我收到此错误：

错误：输入是一个空元素标签，既不能有children，也不能使用dangerouslySetInnerHTML。

我在 StackOverflow 上找到了几个解决方案。我了解到我不应该包含孩子。所以，我将我的输入包装在中。另外，我使表单受控认为 React 可能不允许不受控制的表单。尽管如此，它仍然显示相同的错误。我做错了什么？

谢谢:)

【问题讨论】：

我看到你有一个提交按钮，所以使用button 和type="submit" 而不是输入

标签： reactjs

【解决方案1】：

就像错误状态一样，input 是一个 void 元素，因此它不能包含任何嵌套元素。

此外，向input[type=submit] 元素提供显示文本的方法是使用元素的value 属性。

function Login() {
    return (
        <div className="card login-container">
            <form id="login">
                <label><input name="email" className="email" placeholder="Email" type="text" /></label>
                <label><input name="password" className="password" placeholder="Password" type="password" /></label>
                <label><input type="submit" className="btn btn-submit" value="Submit" /></label>
            </form>
        </div>
    );
}

请注意，这不仅仅是与 reactjs 相关的问题。是的，在这种特殊情况下，react 会警告您您做错了，但通常将元素封闭/嵌套到 void 元素中会使您的 HTML 无效。所以这更像是一个 HTML/语义问题。

【讨论】：