问题描述
SOLVED:FormInput 组件中出现错误,请不要费心阅读问题。 UPDATE:FormInput 组件存在问题,状态正在改变,但作为道具传递给 FormInput 的新状态没有被反映。
我在 React 中创建了这个联系表单,我希望它在提交后清除。 在网上严格搜索后,我找不到为什么我的 this.setState 没有清除输入字段,因为我将所有输入更改为空字符串。看一看:
class contactPage extends React.Component{
constructor(props){
super(props);
this.state = {
name :'',email : '',subject : '',message : ''
}
}
handleChange = (e) =>{
const {name,value} = e.target;
this.setState({
[name] : value
})
}
handleSubmit = (e) => {
e.preventDefault();
this.setState({
name :'',message : ''
});
}
render(){
const { name,email,subject,message } = this.state;
return(
<div className='contact-page'>
<h1 className='title'> Contact Page </h1>
<div className='form-container'>
<form onSubmit={this.handleSubmit}>
<div className='input-container'>
<div className='form-input'>
<FormInput handleChange = {this.handleChange} value={name} type='text' name ='name' label='Full Name'/>
</div>
<div className='form-input'>
<FormInput handleChange = {this.handleChange} value={email} type='email' name ='email' label='Email'/>
</div>
<div className='form-input'>
<FormInput handleChange = {this.handleChange} value={subject} type='text' name ='subject' label='Subject'/>
</div>
<div className='form-input'>
<FormInput handleChange = {this.handleChange} value={message} name ='text-area' label='Message'/>
</div>
<div className='form-input'>
<CustomButton
type='submit' value='SEND' >SEND</CustomButton>
</div>
</div>
</form>
</div>
</div>)
}
}
解决方法
我不是很确定状态不会改变,这可能是你的输入有问题
我已经完成了相同的组件,使用本机输入代替,并且它完美运行