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

Posted 2023-02-22

【中文标题】使用 setState 提交后清除表单输入

【英文标题】：Clearing form input after submitting using 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 的输入标签

【参考方案1】：

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

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