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

【问题标题】：Clearing form input after submitting using setState使用 setState 提交后清除表单输入
【发布时间】：2021-07-07 12:19:41
【问题描述】：

UPDATE：FormInput 组件出现问题，状态正在改变，但作为 props 传递给 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>)
}

}

【问题讨论】：

e.target.reset() 完成了这项工作，但我想知道为什么这不起作用
是否调用了handleSubmit？你能检查一下吗？
是的，它被称为我的句柄提交中有一个 console.log()，我已经检查过
什么是FormInput？是受控输入吗？如果不是受控输入，那就是这个原因。
FormInput 是我制作的一个组件模板，以便我可以在我的应用程序中进一步重用它，它基本上是一个带有一堆 css 的输入标签

标签： javascript reactjs forms setstate rerender

【解决方案1】：

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

我已经完成了相同的组件，而是使用本机输入，并且效果很好

【讨论】：