提交后重置表单输入

Question

所以我得到了一个看起来像这样的表格：

<Form noValidate id="messageForm" onSubmit={(event) => {this.handleSendMessage(event)}}>
    <Form.Group as={Col} md="12" controlId="validationFormik01">
        <Form.Label bsPrefix="contact-title">{t('details.name')}</Form.Label>
        <Form.Control
            type="input"
            placeholder={t('details.namePlaceholder')}
            value={values.name}
            onChange={handleChange}
            name="name"
            isInvalid={!!errors.name}
        />
        <Form.Control.Feedback type="invalid">
            {errors.name}
        </Form.Control.Feedback>
    </Form.Group>
                        ...

这只是一个片段，但我想在不重置其他表单组的情况下重置第一个表单组。我怎样才能做到这一点？我正在尝试在此函数中提交值后重置这些值：

handleSendMessage(event){
    event.preventDefault();
    const { t } = this.props;
    const self = this;
    UserService.sendMessage(event, this.props).then(function (status){
        toast.notify(t('details.messageSent'));
        // I WANT TO RESET THE VALUES HERE
    })
}

Answer 1

在您的提交函数中，只需像这样将特定值设为空白 -this.setState({values:''});

handleSendMessage(event){
    event.preventDefault();
    const { t } = this.props;
    const self = this;
    UserService.sendMessage(event, this.props).then(function (status){
        toast.notify(t('details.messageSent'));
        // I WANT TO RESET THE VALUES HERE
    })
   this.setState({values:''});
}

Answer 2

好的，我最终是这样解决的：

handleSendMessage(event){
    event.preventDefault();
    const { t } = this.props;
    UserService.sendMessage(event, this.props).then(function (status){
        toast.notify(t('details.messageSent'));
    })
    event.target[0].value = '';
    event.target[1].value = '';
    event.target[2].value = '';
}

提交后重置表单输入

Reset form inputs after submit

forms

reactjs

formik