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

Question

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>)
}

}

Answer 1

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

我已经完成了相同的组件，但使用的是原生输入，而且效果很好

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

Clearing form input after submitting using setState

javascript

reactjs

forms

setstate

rerender