Chào mọi người,
Hiện tại thì em đang tìm hiểu về React và có một thắc mắc như sau.
Trong một Form, nếu không có một element
<button type='button'> .....</button>
<!--hoặc-->
<input type='button' .... />
thì sẽ bị một lỗi là
Form submission canceled because the form is not connected
nhưng nếu để type = "button" như vậy thì khi Enter form sẽ không submit mà mình phải nhấp chuột vào nút submit, như thế em thấy khá bất tiện. Nếu chuyển về type = "submit" thì sẽ bị lỗi như trên.
Mọi người cho em hỏi có cách nào khác phục tình trạng này không ạ?
Em xin cảm ơn!
//SignIn.js
import React from 'react';
import './SignIn.css'
class SignIn extends React.Component{
constructor(props){
super(props);
this.state = {
signInEmail: '',
signInPassword: ''
}
}
onEmailChange = (event) => {
this.setState({signInEmail: event.target.value});
}
onPasswordChange = (event) => {
this.setState({signInPassword: event.target.value});
}
onSubmitSignIn = () => {
console.log(this.state);
fetch('http://localhost:3000/signin', {
method: 'post',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
email: this.state.signInEmail,
password: this.state.signInPassword
})
})
this.props.onRouteChange('home');
}
render(){
const {onRouteChange} = this.props;
return(
<article className="min-h-100 br3 ba dark-gray b--black-10 mv4 mw6 w-75-m shadow-5 center">
<main className="pa4 black-80">
<form className="measure">
<fieldset id="sign_up" className="ba b--transparent ph0 mh0">
<legend className="f1 fw6 ph0 mh0">Sign In</legend>
<div className="mt3">
<label className="db fw6 lh-copy f6" htmlFor="email-address">Email</label>
<input
className="pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
type="email"
name="email-address"
id="email-address"
onChange={this.onEmailChange}
/>
</div>
<div className="mv3">
<label className="db fw6 lh-copy f6" htmlFor="password">Password</label>
<input
className="b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
type="password"
name="password"
id="password"
onChange={this.onPasswordChange}
/>
</div>
</fieldset>
<div className="">
<input
className="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib"
type="submit"
value="Sign in"
onClick={this.onSubmitSignIn}
/>
</div>
<div className="lh-copy mt3">
<p href="#0"
className="f6 link dim black db pointer underline"
onClick={() => onRouteChange('register')}>
Register
</p>
</div>
</form>
</main>
</article>
)
}
}
export default SignIn;
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?