How to add event handlers within const in React? - reactjs

Question

I'm new to React and I'm doing a react project with PRIMER React template. In the sign in page, the code as follows.
const Signin = (props) => {
const { classes } = props;
return (
<form>
<TextField
id="username"
label="Username"
className={classes.textField}
fullWidth
margin="normal"
/>
<TextField
id="password"
label="Password"
className={classes.textField}
type="password"
fullWidth
margin="normal"
/>
<Button variant="raised" color="primary" fullWidth type="submit">Login</Button>
</form>
);
}
I need to add the form Submit event handler. So I added that code as follows.
const Signin = (props) => {
const { classes } = props;
this.handleSubmit = this.handleSubmit.bind(this);
handleSubmit(event) {
event.preventDefault();
const data = new FormData(event.target);
this.setState({
res: data
});
console.log(this.state.res)
}
return (
<form onSubmit={this.handleSubmit}>
<TextField
id="username"
label="Username"
className={classes.textField}
fullWidth
margin="normal"
/>
<TextField
id="password"
label="Password"
className={classes.textField}
type="password"
fullWidth
margin="normal"
/>
<Button variant="raised" color="primary" fullWidth type="submit">Login</Button>
</form>
);
}
But this is not working. I can't even compile this. Whats the wrong here and How can I manage event handlers??

Answer 1

Your component is a functional component. So do the followings and run once :
remove this.handleSubmit = this.handleSubmit.bind(this);
event handleSubmit place it like a const handleSubmit = (e) => {} or place it outside the component and setState - make it as a class component.Still you need functional component, use hooks or use refs inside stateless components.
change <form onSubmit={this.handleSubmit}> to <form onSubmit={handleSubmit}>
Either, you can use class component for this case Signin if your intention is to use setState. to Converting a Function to a Class check this.
and in functional component you can define ref like this:
<input type='text' placeholder='Enter City Name'
ref={ el => cityInput = el } />
and in submit you can get it's value like:
cityInput.value
Example Functoinal Component :
const MyComponent = (props) => {
let cityInput
const onSubmit = e => {
e.preventDefault()
let city = cityInput.value
if (city) {
console.log(city)
}
}
return (
<div>
<form onSubmit={ onSubmit }>
<div>
<input type='text' placeholder='Enter City Name'
ref={ el => cityInput = el } />
</div>
<div>
<button>Go</button>
</div>
</form>
</div>
)
}
Demo
Hope it helps

Answer 2

I believe the error is because you're mixing regular function/class syntax with arrrow syntax.
Remember arrows function have no "this" or calling context so you'll need to make that changes at mentioned by Panther. All the best.
see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions for more details
actually I see you're using state in the component.
You'll have to convert it into a class or instead use a hook
const [formRes, setformRes] = React.UseState();
handleSubmit(event) {
event.preventDefault();
const data = new FormData(event.target);
setformRes(data)
console.log(formRes)
}

Answer 3

use class component.
Pass down the eventHandler function from Parent component.
functional component supposed to return some JSX. if you want do some mess staff, class component will be better!