Сбросить ввод данных после отправки - PullRequest
0 голосов
/ 06 января 2020

Итак, я получил форму, которая выглядит следующим образом:

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

Ответы [ 2 ]

0 голосов
/ 06 января 2020

Хорошо, я решил это так:

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 = '';
}
0 голосов
/ 06 января 2020

Внутри вашей функции отправки просто сделайте конкретное значение пустым, как это - 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:''});
}
...