英文:
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.
<div>
<Modal show={this.state.show} handleClose={this.hideModal} >
                <div className="blkOverlay">
                    {/* This is Login Form to log in to your profile */}
                    <div className="formContent modal-main">n>
                        <h2>Welcome Back <span>Brandon!</span></h2>
                        <form show={this.state.show} handleClose={this.hideModal}>
                            <input type="text" name="email" placeholder="Email Address" />
                            <input name="password" type="text" placeholder="Password" passwordToggle="true" iconShow="eye" iconHide="eye-blocked" />
                            <div className="passContent">
                                <div className="checkingPass">
                                    <input name="checkbox" type="checkbox"></input>
                                    <p className="passFont">Remember Password</p>
                                </div>
                                <p className="passFont">Remember Password</p>
                            </div>
                            <input type="button" name="button">Login</input>
                            <div className="social-media-button">
                                <input type="button" name="button">Sign in with Facebook</input>
                                <input type="button" name="button">Sign in with Google</input>
                            </div>
                            <p className="passFont">Don't have an account? <span>Create a account</span></p>
                        </form>
                    </div>
                    {/* This is Sign up to create a account */}
                </div>
            </Modal>
          </div>
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:
<input type="button" value="Sign in with Facebook">
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。


评论