i'm trying to use login and register in one page in react tsx and this is my code but when i click to show login it's show for like 1 second and then return to signup i don't know why the state change
import React, { ReactElement, Fragment, useState } from 'react'
interface Props { }
function Home({ }: Props): ReactElement {
const [login, setlogin] = useState(false);
return (
<Fragment>
<div className="welcomdiv">
<h1 id="weltxt">Welocme to your Todo List</h1>
<h3 id="strtxt">Let's Start By Making a Account</h3>
</div>
{login ?
<form className="form-signin">
<input type="email" id="inputEmail" className="form-control" placeholder="Email address" required />
<input type="password" id="inputPassword" className="form-control" placeholder="Password" required />
<button className="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
:
<form className="form-signup">
<input type="text" name="username" className="form-control" placeholder="Username" required />
<input type="email" name="email" className="form-control" placeholder="Email address" required />
<input type="password" name="password" className="form-control" placeholder="Password" required />
<input type="password" name="password2" className="form-control" placeholder="Confirm Password" required />
<button className="btn btn-lg btn-primary btn-block" type="submit">Sign Up</button>
</form>}
<p id="logintxt">Alrady have an Account , Want to <a href="" onClick={() => setlogin(true)}>Login</a></p>
</Fragment>
)
}
export default Home;
This is because button with the type, submit, will actually try to trigger the form's default submit action.
<button className="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
If you do not wish that to happen, you can simply switch the type to button, and manually bind the onClick event to your custom click handler method.
type="button"
You may read more about the submit behaviour over here.
In addition, it will be more specific if you type your functional component as React.FC<Props>, instead of ReactElement.
Related
I am trying to add a modal to my page but it only stays open for a second and then closes again.
Here is my code:
Home.js
import './Home.css';
import React, {useState} from 'react';
import Modal from "./components/Modal";
function Home() {
const [openModal, setOpenModal] = useState(false);
return (
<div>
{console.log(openModal)}
<div className="App">
<header className="App-header">
<h1 className="App-name">iScore</h1>
</header>
</div>
<div className="Auth-form-container">
<form className="Auth-form">
<div className="Auth-form-content">
<h3 className="Auth-form-title">Sign In</h3>
<div className="form-group-both">
<div className="form-group mt-3">
<label>Email address: </label>
<input
type="email"
className="form-control mt-1"
placeholder="Enter email"
/>
</div>
</div>
<div className="form-group-pass">
<div className="form-group mt-3">
<label>Password: </label>
<input
type="password"
className="form-control mt-1"
placeholder="Enter password"
/>
</div>
</div>
<div className="popup">
<button className="submit"
>
Submit
</button>
</div>
{openModal && <Modal setOpenModals={setOpenModal}/>}
<p className="forgot-password text-right mt-2">
Forgot password?
</p>
<p>
Need an account?
</p>
<button className="sign-up" onClick={() => {
setOpenModal(true);
}}>Register
</button>
</div>
</form>
</div>
</div>
);
}
export default Home;
Modal.js
import "./Modal.css";
import {useState} from "react";
function Modal({ setOpenModals }) {
const handleChange = (event) => {
console.log("Checked: ", event.target.checked)
setAgreement(event.target.checked);
}
return(
<div className="modalBackground">
<div className="modalContainer">
<article>
<button className="Close" onClick={() => setOpenModals(false)}> × </button>
{/*<form>*/}
<div className="Auth-form-content">
<h3 className="Auth-form-title">Register</h3>
<div className="form-group mt-3">
<label>Email address: </label>
<input
type="email"
className="form-control mt-1"
placeholder="Enter email"
/>
</div>
<div className="form-group mt-3">
<label>Email address: </label>
<input
type="name"
className="form-control mt-1"
placeholder="Enter first name"
/>
</div>
<div className="form-group mt-3">
<label>Password: </label>
<input
type="password"
className="form-control mt-1"
placeholder="Enter password"
/>
</div>
<div className="form-group mt-3">
<label>Confirm Password: </label>
<input
type="password"
className="form-control mt-1"
placeholder="Enter password again"
/>
</div>
<div>
<input type="checkbox" name="terms" value="yes" onChange={handleChange}/>
<label htmlFor="terms"> I agree to the terms and conditions</label>
</div>
</div>
{/*</form>*/}
</article>
<footer>
<button disabled={!agreement} onClick={() => {handleSubmit();setOpenModals(false)}}>Register</button>
<button onClick={() => setOpenModals(false)} >Close</button>
</footer>
</div>
</div>
)
}
export default Modal
It seems that as soon as I press Register I can see in the console that openModal is set to True, but then immediately gets set back to false.
I am at a bit of a loss as to what to changes to try and make this work. From my perspective it should be doing it correctly.
Am I missing something here?
The issue is that in Modal.js in <button disabled={!agreement} onClick={() => {handleSubmit();setOpenModals(false)}}>Register</button> you use undeclared
agreement variable that cause Modal.js throw an error and do not render. You need pass agreement as prop or add a new state const [agreement, setAgreement] = useState(false) or remove disabled={!agreement} from a button in Modal.js
Edited
You have a form tag in Home.js and when you click Register button it opens the Modal AND submits a form. By default, a button has an innate type property of submit. When clicked, or activated inside a form, it will cause that form to submit (and trigger a corresponding submit event). This submit event cause Modal to close. Add type="button" to the Register button in Home.js.
at:
<button disabled={!agreement} onClick={() =>
{handleSubmit();setOpenModals(false)}}>Register</button>
You are calling setOpenModals false right after handleSubmit() which is causing immediate close of modal.
You need to close the modal in handleSubmit() function.
I am new to Reactjs. I just wrote this code and onSubmit function is not working. I am not getting if it's fault of register or form handleSubmit.Might be error in this line where the form tag is written.
Please guide and let me know of solutions.react-hook-form version is 7.14
React version is 17.02
FieldArray.js
import React, { Fragment } from "react";
import { useForm } from "react-hook-form";
function FieldArray() {
const { register, handleSubmit } = useForm();
const basicform = (
<div className="card">
<div className="card-header">Basic Information</div>
<div className="card-body">
<div>
<div className="form-group">
<label htmlFor="fullname">Full Name</label>
<input
type="text"
className="form-control"
id="fullname"
name="fullname"
{...register("fullname")}
/>
</div>
<div className="form-group">
<label htmlFor="email">Email address</label>
<input
type="email"
className="form-control"
id="email"
name="email"
{...register("email")}
/>
</div>
<div className="form-group">
<label htmlFor="phone">Phone Number</label>
<input
type="text"
className="form-control"
id="phone"
name="phone"
{...register("phone")}
/>
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<input
type="password"
className="form-control"
id="password"
name="password"
{...register("password")}
/>
</div>
</div>
</div>
</div>
);
const onSubmit = data => {
console.log('hjhhhh');
console.log(data);
}
return (
<div className="App">
<div className="container py-5">
<form onSubmit={handleSubmit(onSubmit)}>{basicform}</form>
<button className="btn btn-primary" type="submit">Submit</button>
</div>
</div>
);
}
export default FieldArray;
We have to wrap the submit button inside the Form tag
<form onSubmit={handleSubmit(onSubmit)}>
{basicform}
<button className="btn btn-primary" type="submit">
Submit
</button>
</form>
Sandbox - https://codesandbox.io/s/silly-cori-t94eu?file=/src/react-hook-form.jsx
I am using react and I am a beginner in React. I am facing a problem while using React Modal.
It looks like modal is working but something is stopping it from working when I click on the button which opens Modal then this happens => The screen just blinks , The Modal opens and closes suddenly. I am using React useState Hook. No errors are reflected by the compiler in this code.
Here is my code :
import React from 'react'
import { useState } from 'react';
import Modal from 'react-modal'
import '../CSS/LoginSignup.css'
const LoginSignup = () => {
const [modalIsOpen , setIsOpen] = useState(false);
function openModal() {
setIsOpen(true);
}
function closeModal() {
setIsOpen(false);
}
function afterOpenModal() {
if(!closeModal){
setIsOpen(true);
}
}
return (
<>
<div>
<div className="mainContainer">
<div className="maincontrol">
<div className="tagline">
<h1>Chat Free</h1>
<span><p>Connect with peoples and chat the way you like.</p></span>
</div>
<div className="login">
<form className="form">
<input type="text" id="login" className="inp1" name="login" placeholder="Email address or phone number" />
<input id="password" type="password" className="inp1" name="login" placeholder="Password" />
<button type="submit" className="btn" value="Log In">Log In</button>
Forgotten password?
<button type="SignUp" className="btn1" value="Sign Up" name="signUp" onClick={openModal}>Sign Up</button>
<Modal isOpen={modalIsOpen}
onAfterOpen={afterOpenModal}
onRequestClose={closeModal}
>
<div className="modal">
<div className="modal-content">
<h2>Sign Up!</h2>
<span className="close" onClick={closeModal} >×</span>
<form className='formsignup'>
<div className="fullname">
<div className="firtname">
<input type="text" placeholder="First Name" id="firstname" />
</div>
<div className="surname">
<input type="text" placeholder="Last Name" id="lastname" />
</div>
</div>
<div className="emailphone">
<input type="text" placeholder="Email or phone number" id="ephone"/>
</div>
<div className="password">
<input type="password" placeholder="Enter password" id="password"/>
</div>
<div className="dobmain">
<div className="date">
<label htmlFor="dob">Date of birth</label>
<input type="number" placeholder="Date" id="date"/>
</div>
<div className="month">
<input type="text" placeholder="Month" id="month"/>
</div>
<div className="year">
<input type="number" placeholder="Year" id="year"/>
</div>
</div>
<div className="gender">
<div className="male">
<label htmlFor="">Male</label>
<input type="radio" name="gender" id="male" />
</div>
<div className="female">
<label htmlFor="">Female</label>
<input type="radio" name="gender" id="male" />
</div>
<div className="other">
<label htmlFor="">Other</label>
<input type="radio" name="gender" id="male" />
</div>
</div>
<div className="button">
<button type="Register" className="btnR" value="Register" name="register">Sign Up</button>
</div>
</form>
</div>
</div>
</Modal>
</form>
</div>
</div>
</div>
</div>
</>
)
}
export default LoginSignup
It is the content on my console:
[HMR] Waiting for update signal from WDS...
webpackHotDevClient.js:138 src\Component\LoginSignup.js
Line 33:33: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
printWarnings # webpackHotDevClient.js:138
I would like to press the Enter Key and send a message. I try this:
But there is an error.
<input type="text" className="form-control input-sm chat_input" placeholder="Write your message here..."
onChange={this.handleTextChange} value={this.state.newMessage}
/>
<span className="input-group-btn">
<input type="submit" value="Send" className="btn btn-primary btn-sm" onSubmit={this.handleSendMessage}
/></span>
And I want to manage my function:
handleSendMessage = e => {}
I already try OnKeyPressed but I can't call my functions there.
Thank you.
I prefer a solution without jquery
You would add a keyPress event on the input text input and then detect for an enter key press using e.which ===13
onKeyPress = (e) => {
if(e.which === 13) {
this.handleSendMessage();
}
}
render() {
return (
<div style={styles}>
<input type="text" className="form-control input-sm chat_input" placeholder="Write your message here..."
onChange={this.handleTextChange} onKeyPress={this.onKeyPress} value={this.state.newMessage}
/>
<span className="input-group-btn">
<input type="submit" value="Send" className="btn btn-primary btn-sm" onSubmit={this.handleSendMessage}
/></span>
</div>
);
}
You can use a form for it and change your button type to submit
<form onSubmit={this.handleSendMessage}>
<input type="text" className="form-control input-sm chat_input"
placeholder="Write your message here..."
onChange={this.handleTextChange} value={this.state.newMessage}
/>
<span className="input-group-btn">
<input type="submit" value="Send" className="btn btn-primary btn-sm"/>
</span>
</form>
I have a mystery trouble: when I clicking to the button or press enter, nothing is happen.
Row = ReactBootstrap.Row
Col = ReactBootstrap.Col
Input = ReactBootstrap.Input
Button = ReactBootstrap.Button
#NewSession = React.createClass
handleSubmit: (e) ->
alert 'f'
e.preventDefault()
Dispatcher.query('sessions', {}, 'POST')
render: ->
<form onSubmit={#handleSubmit} noValidate>
<Row>
<Col md={6} mdOffset={3} className='text-center'>
<Input type='text' placeholder='Your username' ref='login' />
<Input type='text' placeholder='Your password' ref='password' />
<Button bsStyle='success'>Sign in</Button>
</Col>
</Row>
</form>
What is the reason of this strange behavior? Why handleSubmit doesn't work?
UPDATED
If I place onClick={#handleSubmit} handler on button, clicking is works
react-bootstrap Button components default to type="button", so you need to add type="submit" to create a submit button.
<Button type='submit' bsStyle='success'>Sign in</Button>
You don't have any submit event... You need to declare a type=submit inside the render method. Then you can use your onSubmit event handler function. Example below:
<form onSubmit={this.handleSubmit.bind(this)}>
<div className="form-group col-sm-7">
<input type="text" className="form-control" ref="inputmessage" id="inputDefault" />
</div>
<div className="form-group col-sm-5">
<button type="submit" className="btn btn-block btn-primary">Send Message </button>
</div>
</form>