在尝试创建React登录表单时遇到了问题。

huangapple go评论74阅读模式
英文:

Facing issue while tried to created login form in react

问题

以下是翻译好的内容:

输入是一个无内容元素标签,不能包含“children”,也不能使用“dangerouslySetInnerHTML”。

<div>
  <Modal show={this.state.show} handleClose={this.hideModal}>
    <div className="blkOverlay">
      {/* 这是登录表单,用于登录到您的个人资料 */}
      <div className="formContent modal-main">
        <h2>欢迎回来 <span>Brandon</span></h2>
        <form show={this.state.show} handleClose={this.hideModal}>
          <input type="text" name="email" placeholder="电子邮件地址" />
          <input name="password" type="text" placeholder="密码" passwordToggle="true" iconShow="eye" iconHide="eye-blocked" />
          <div className="passContent">
            <div className="checkingPass">
              <input name="checkbox" type="checkbox"></input>
              <p className="passFont">记住密码</p>
            </div>
            <p className="passFont">记住密码</p>
          </div>
          <input type="button" name="button">登录</input>
          <div className="social-media-button">
            <input type="button" name="button">使用Facebook登录</input>
            <input type="button" name="button">使用Google登录</input>
          </div>
          <p className="passFont">还没有帐户 <span>创建一个帐户</span></p>
        </form>
      </div>
      {/* 这是注册以创建帐户 */}
    </div>
  </Modal>
</div>

关于在ReactJS中创建表单以避免输入错误的正确方法,您可能需要检查您的表单元素和事件处理程序是否正确设置。此外,确保在React中使用的表单元素的值(如<input>中的value)受到组件状态的控制,并且与状态变化同步更新。如果您在表单方面遇到具体问题,请提出更具体的问题,以便获得更详细的帮助。

英文:

Input is a void element tag and must neither have children nor use dangerouslySetInnerHTML.

&lt;div&gt;
&lt;Modal show={this.state.show} handleClose={this.hideModal} &gt;
                &lt;div className=&quot;blkOverlay&quot;&gt;
                    {/* This is Login Form to log in to your profile */}
                    &lt;div className=&quot;formContent modal-main&quot;&gt;n&gt;
                        &lt;h2&gt;Welcome Back &lt;span&gt;Brandon!&lt;/span&gt;&lt;/h2&gt;
                        &lt;form show={this.state.show} handleClose={this.hideModal}&gt;
                            &lt;input type=&quot;text&quot; name=&quot;email&quot; placeholder=&quot;Email Address&quot; /&gt;
                            &lt;input name=&quot;password&quot; type=&quot;text&quot; placeholder=&quot;Password&quot; passwordToggle=&quot;true&quot; iconShow=&quot;eye&quot; iconHide=&quot;eye-blocked&quot; /&gt;
                            &lt;div className=&quot;passContent&quot;&gt;
                                &lt;div className=&quot;checkingPass&quot;&gt;
                                    &lt;input name=&quot;checkbox&quot; type=&quot;checkbox&quot;&gt;&lt;/input&gt;
                                    &lt;p className=&quot;passFont&quot;&gt;Remember Password&lt;/p&gt;
                                &lt;/div&gt;
                                &lt;p className=&quot;passFont&quot;&gt;Remember Password&lt;/p&gt;
                            &lt;/div&gt;
                            &lt;input type=&quot;button&quot; name=&quot;button&quot;&gt;Login&lt;/input&gt;
                            &lt;div className=&quot;social-media-button&quot;&gt;
                                &lt;input type=&quot;button&quot; name=&quot;button&quot;&gt;Sign in with Facebook&lt;/input&gt;
                                &lt;input type=&quot;button&quot; name=&quot;button&quot;&gt;Sign in with Google&lt;/input&gt;
                            &lt;/div&gt;
                            &lt;p className=&quot;passFont&quot;&gt;Don&#39;t have an account? &lt;span&gt;Create a account&lt;/span&gt;&lt;/p&gt;
                        &lt;/form&gt;
                    &lt;/div&gt;
                    {/* This is Sign up to create a account */}
                &lt;/div&gt;
            &lt;/Modal&gt;
          &lt;/div&gt;

What is the proper way to create a form in reactjs with getting this error about the input?

答案1

得分: 1

You should not put "Sign in with Facebook/Google" inside the input-tag. This is the reason why it is complaining about children. In React, a child is another tag inside a tag.

You should use:

<input type="button" value="Sign in with Facebook">
英文:

You should not put "Sign in with Facebook/Google" inside the input-tag. This is the reason why it is complaining about children. In React, a child is another tag inside a tag.

You should use:

&lt;input type=&quot;button&quot; value=&quot;Sign in with Facebook&quot;&gt;

huangapple
  • 本文由 发表于 2020年1月7日 00:15:18
  • 转载请务必保留本文链接:https://go.coder-hub.com/59615429.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定