Javascript 使用setState提交后清除表单输入

已解决：如果FormInput组件中有错误，请不要费心阅读该问题。 更新：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 :'',
        email : '',
        subject : '',
        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>)
}

class contactPage扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
名称：“”，
电子邮件：“”，
主题：''，
消息：“”
}
}
handleChange=（e）=>{
常量{name，value}=e.target；
这是我的国家({
[名称]：值
})
}
handleSubmit=（e）=>{
e、 预防默认值（）；
这是我的国家({
名称：“”，
电子邮件：“”，
主题：''，
消息：“”
});
} 
render（）{
const{name，email，subject，message}=this.state；
返回(
联系页面
邮寄
)
}

}

---

尝试在发送按钮上调用handleSubmit函数，单击它将重置状态

<CustomButton onclick="handleSubmit()"  type='submit' value='SEND' >SEND</CustomButton>

发送

我不是很确定状态没有变化，这可能是您的输入有问题

---

我只使用了相同的组件，而是使用本机输入，它工作得非常好

e.target.reset（）完成了这项工作，但我想知道为什么它不工作，调用handleSubmit？您能检查一下吗？是的，它叫做我有一个控制台。log（）在我的句柄提交中，我已经检查了什么是

FormInput

？它是受控输入吗？如果它不是受控输入，那么这就是原因。FormInput是我制作的一个组件模板，这样我可以在我的应用程序中进一步重用它，它基本上是一个带有一堆cssDidn的输入标记。不做任何更改，自定义按钮会自动触发handleSubmit，它是一个类型为“submit”的按钮，用于触发表单的onSubmit功能