使用 setState

如何解决使用 setState

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

}

解决方法

我不是很确定状态不会改变，这可能是你的输入有问题

我已经完成了相同的组件，使用本机输入代替，并且它完美运行