React ignore требуется при вводе формы

#html #reactjs

Вопрос:

Я пытаюсь проверить ввод формы, чтобы вы не могли отправить форму, не заполнив ввод текста описания

 <input placeholder="Description" type='text' name="description" className="form-control" value={this.state.description} onChange={this.changeDescriptionHandler} required />
 

Но когда я отправляю форму, она позволяет мне отправлять ее с пустым вводом, хотя я указал «требуется». В чем может быть проблема?

PS, состояние выглядит следующим образом

 
this.state = {
            description: '',
            name: '',
            birthDate: '',
            gender: 'MALE'
        }
 

и отправить

 saveCasefile = (e) => {
        e.preventDefault();
        let patient = { name: this.state.name, birthDate: this.state.birthDate, gender: this.state.gender }
        let casefile = { description: this.state.description, patient: patient };
        CaseFilesService.createCasefile(casefile).then(res => {
            this.props.history.push('/');
        })
    }

 

Комментарии:

1. Требуется выполнить попытку={true}

2. Можете ли вы поделиться кодом, показывающим, как отправляется форма?

3. @chrisg86 , готово

4. Как вы вызываете saveCaseFile() ? required Атрибут работает только для традиционных <input type="submit"> форм; приложения React часто просто используют встроенные обработчики кликов вместо «реальных» форм, поэтому не смогут использовать этот атрибут (если вы не выполняете дополнительную работу для его поддержки)

5. @DanielBeck , я думаю, вы правы, я вызываю это с помощью: <button className=»btn btn-success» onClick={this.saveCasefile}>Сохранить</button>

Ответ №1:

установите условие в функции обработчика отправки.

 if(this.state.description !== ''){ .... }