I want a way to show a classes render method due to an onclick event.
I have a log in page, once the uses completes it and hits submit (aka logs in), I want a new view to render.
class LoginPage extends React.Component{
render() {
return (
<div id="container">
<button onClick={() => this.refs.myref.myfunc()}>Click</button>
<form onSubmit={this.handleClick}>
<p><input type="text" id="playerName" value={this.props.nameValue} onChange={this.handleNameChange} /></p>
<p><input type="email" id="playerEmail" value={this.props.emailValue} onChange={this.handleEmailChange}/></p>
<p><input type="submit" value="submit" /></p>
</form>
</div>
)
}
}
class HomePage extends React.Component{
//does things
render() {
return (
<div>
<h1 className="headings" id="heading"> Home Page </h1>
</div>
)
}
}
How can I render the Home Page title instead of the form. I used to have some code that would toggle it based on state but now I am trying to break it into components and only set state in one place.
The handleClick function was updating the state before but now it is doing nothing but I want it to in some way call the render method inside the homepage component or pass state/props around. what is the react way of doing this? can further clarify if things do not make sense
Related
I have a component with thie structure
handleSubmit(event) {
... handle submission
}
<form onSubmit={this.handleSubmit}>
<Sidebar
handleSubmit={this.handleSubmit}
handler={this.loadTemplateCV}
></Sidebar>
</form>
only inside the sidebar component I have the submit button like so:
function Sidebar(props) {
...
return (
<div className="flex-shrink-0 w-80 bg-gray-200 border-gray-300 border
<button className="button-format" type="submit" onClick={props.handleSubmit()}>
Submit
</button>
</div>)
}
How can I trigger a submit with HTML form validation from the children component? When I try like this, the handleEvent triggers as undefined. I can manually still handle submission data without the event but that doesn't trigger HTML form validation which I want.
For example, I created a Root Component named Index.vue, and Registred these 3 Login, Agree and Validation. What I'm picturing out is, after click submit button inside Login, the Agree.vue is showed and successively is happen when I click submit button inside Agree.
I think that I should use prop data to passing among components a state about each components, that way trigged a command to show the component that I want. But how I should "hide" the other components. I don't know if there a way to register the component at the moment submit form inside each Login, Agree, ...
<template>
<v-app>
<Login />
<Agree />
<Validation />
</v-app>
</template>
<script>
export default {
components:{
Login: () => import('./components/Login'),
Agree: () => import('./components/Agree-Term')
Validation: () => import('./components/Validation')
}
}
</script>
GOAL:
I am making a login by Google functionality in my website using Firebase Auth. I want When the user clicks the Signin link in the Navbar, he is redirected to the login page, in the login page, there is a dummy email/password input form and a Login with Google Button. When the user clicks on the Login with Google button he should be redirected to all the email list, so that he can choose from which he wants to login.
ERROR:
When the user clicks on the Signin Link in the Navbar the Login Route opens up and the function for the firebase auth is called by itself, without even clicking the Google Signin Button and the user is redirected to the emails list page.
Login.jsx:
import React from 'react'
import {Link} from "react-router-dom"
import './components/css/login.css'
import googleLogo from "./components/svg/google.svg"
import brandLogo from "./components/img/logo1.png"
//The JS for Login is in another file
import { googleSignin } from './firebase/googleLogin'
function login() {
return (
<div className="background-div" >
<nav className="login-nav" >
<img src={brandLogo} alt="logo"/>
<h2>the<strong>Dukaandar</strong></h2>
</nav>
<form action="" className="login-form">
<h3><strong>Login into your account</strong></h3>
<h5 className="login-email" >Email</h5>
<input type="text" className="login-email-input" placeholder="Enter your email" />
<h5 className="login-password">Password</h5>
<input type="password" className="login-password-input" placeholder="Enter your password" />
<br />
<button className="login-button">Login</button>
<Link className="login-forgot-password">forgot password?</Link>
<hr />
// The onClick attribute in React, I expect anything to happen only after clicking this button
<button className="google-login" onClick={googleSignin()} > <span className="google-image"><img src={googleLogo} alt=""/></span>Login with Google</button>
<Link to={"/"}>Back to Home</Link>
</form>
</div>
)
}
export default login
JS File:
import firebase from 'firebase'
const firebaseConfig = {
// Key value pairs of my config
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
//This is the Function which has to be called on button click
function googleSignin() {
var provider = new firebase.auth.GoogleAuthProvider();
firebase
.auth()
.signInWithRedirect(provider)
.then(function(result) {
// This gives you a Google Access Token. You can use it to access the Google API.
var token = result.credential.accessToken;
// The signed-in user info.
var user = result.user;
console.log(user);
console.log(result);
})
.catch(function(error) {
console.log(error);
});
}
export { googleSignin }
While searching for it I came to know about lifecycle methods which occurs when the component is rendered, if that is the case here, how to stop them to call itself?
As told in answer below and from my finding onClick{ () => googleSignin } also does not work, and also when I call the function with parenthesis googleSignin(), the function is atleast called but withot it nothing hapens.
I suspect there can be a React Router problem also, but I don't know.
Thank you in advance
Full Source Code of the Website on Github,
Live Preview on Netlify
By adding parenthesis on the onClick handler, you are invoking the function as soon as it is loaded. Remove the parenthesis and it will work.
<button className="google-login" onClick={googleSignin}>
<span className="google-image">
<img src={googleLogo} alt="" />
</span>
Login with Google
</button>
When the Browser sees the function is being called and not referenced on the OnClick method, it takes the responsibility and calls the function by itself. So, we have to free the Browser from its responsibility, and let the Function to be called only when the User clicks on the button.
Make a Handler function to free the Browser from its responsibility:
function handleClick(e) {
e.preventDefault();
googleSignin();
console.log('The link was clicked.');
}
Reference handleClick in your onClick method:
<button className="google-login"
//Reference handleClick here.
onClick={handleClick}>
<span className="google-image">
<img src={googleLogo} alt=""/>
</span>
Login with Google
</button>
This will solve the problem.
I a laravel project using React js for the font-end , i would like to pass some data rendered by a React component to my controller. In a blade template i have a form , and within that form , i'm displaying a "select" element using React js. How to pass the value in the select element via the Request(Request $request) variable to the controller?
Here is my form in the blade template:
<form method="POST" action="">
#csrf
<div id="example" data={{ $currencies }}></div>
<input type="submit" value="Create" class="btn btn-primary">
</form>
And there is the component:
class Example extends Component {
render() {
return(
<div>
<select>
<option></option>
<option>Currency</option>
<option>Reputation</option>
</select>
</div>
);
}
}
export default Example;
if (document.getElementById('example')) {
var data = document.getElementById('example').getAttribute('data');
ReactDOM.render(<Example data={data}/>, document.getElementById('example'));
}
I guess you can simply send or pass the data to laravel route or controller directly . You can use fetch() method or axios() to send the data in post method to the url and catch that in the respective controller. As react component or can say react is only the view of the MVC that there is no way(may be in my knowledge) to pass the data to server side with a api request like fetch() n all.
Strange, my entire component keeps submitting by clicking the incorrect button.
The layout:
B Component is inside Component A. A Component has the form. B Component triggers the form submit and I dont know why.
In the return function of A Component:
<form action... method...>
<BComponent />
<button type="submit">Submit</button>
</form>
B Component:
...
_removeFile: function(num){
// issue if function is empty
},
_fileRender: function(){
var files = this.state.fileDetails.map( function(f, x) {
return(
<div key={x}>
<div className="">
<button onClick={this._removeFile.bind(this, x)}>Remove</button>
</div>
</div>
)
}.bind(this));
return(<div>{files}</div>)
},
render: function(){
return(<div>{this._fileRender()}</div>)
}
...
So when I click the remove button, the form submits. Why? That button passes data to _removeFile(). Regardless if that function's empty or not, it still submits. e.preventDefault() does nothing. My knowledge at this stage is limited so excuse the silly mistake, if any.
Worst case is to put Component A's submit button into an onClick().
1.you may use <input type="button"/>, without event.preventDefault()
your updated code > JSBin
<input type="button" value="remove" onClick={this._removeFile.bind(this, x)}/>
in React documentation's examples you may notice that they prefer to use <input type="submit"/> and <input type="button"/>
2.in your map's callback you may use arrow func, in order to not bind
var files = this.state.fileDetails.map((f, x)=>
<div key={x}>
<div className="">
<button onClick={this._removeFile.bind(this, x)}>Remove</button>
</div>
</div>
);
Any button will submit its parent form. This is what buttons do :)
If you need a button but want to prevent the default action you need to use event.preventDefault().
Since you prepopulate an argument to the function using .bind, the event object will be passed as the second argument:
_removeFile: function(num, e){
// do stuff with num
e.preventDefault();
},
working demo: http://jsfiddle.net/69z2wepo/47187/