Stack Overflow Asked by gihankumara on December 17, 2020
i am trying to alert my form data using form submit function. after submit, I need to prevent reload. please check below code.
this is my render method
render() {
return (
<div>
<form onSubmit={() => this.formSubmitHandler(this.state.username, this.state.password, this.state.logtype )}>
<input type="text" placeholder="Username" value={this.state.username} onChange={this.usernameHandler} />
<input type="password" placeholder="Password" value={this.state.password} onChange={this.passwordHandler} />
<select value={this.state.logtype} onChange={this.typeHandler}>
<option value="Primary"> Primary</option>
<option value="Secondary"> Secondary</option>
</select>
<button>Submit</button>
</form>
</div>
);
}
this is my submit function
formSubmitHandler = (a,b,c) => {
alert(`${a} + ${b} + ${c}`);
event.preventDefault();
}
this function works well and alert also working well. but event.preventDefault() not working.
error said "Unexpected use of ‘event’ no-restricted-globals". how i fix this
In your on submit method pass event as argument
onSubmit={(event) => this.formSubmitHandler(event, this.state.username, this.state.password, this.state.logtype )}
and get from formSubmitHandler get event as a parameter
formSubmitHandler = (event, a,b,c) => {
event.preventDefault();
alert(`${a} + ${b} + ${c}`);
}
Correct answer by Rajitha Udayanga on December 17, 2020
No need to pass the state to this.formSubmitHandler because you can access it inside the function itself.
import React from "react";
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { username: "", password: "", logtype: "" };
this.usernameHandler = this.usernameHandler.bind(this);
this.passwordHandler = this.passwordHandler.bind(this);
this.typeHandler = this.typeHandler.bind(this);
this.formSubmitHandler = this.formSubmitHandler.bind(this);
}
usernameHandler() {
// your code
}
passwordHandler() {
// your code
}
typeHandler() {
// your code
}
formSubmitHandler(e) {
e.preventDefault();
console.log(this.state);
}
render() {
return (
<div>
<form onSubmit={this.formSubmitHandler}>
<input
type="text"
placeholder="Username"
value={this.state.username}
onChange={this.usernameHandler}
/>
<input
type="password"
placeholder="Password"
value={this.state.password}
onChange={this.passwordHandler}
/>
<select value={this.state.logtype} onChange={this.typeHandler}>
<option value="Primary"> Primary</option>
<option value="Secondary"> Secondary</option>
</select>
<button>Submit</button>
</form>
</div>
);
}
}
Answered by ridoansaleh on December 17, 2020
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP