Как я могу проверить несколько текстовых полей в форме отправки в пользовательском интерфейсе ткани с помощью reactJS и машинописного текста?

Я написал текстовые поля, как показано ниже, в теге формы. Оба текстовых поля вызывают одну и ту же функцию. я должен вызвать {this._getErrorMessage} несколько раз в одно и то же время

Я объявляю функцию вне формы, как показано ниже. Эта функция проверяет нулевое значение.

    _getErrorMessage = (value: any) => {
    value.trim().length === 0 ? required : "" 
   }

    <Textfield
    id = {AppIDConst`enter code here`ants.EMP_NAME}
    type = {fieldPropertyConstants.TEXT}
    label = {filedLabelConstants.EMP_NAME}
    onChange = {this.handleChangeEvent.bind(this)}
    required = {true}
    validateOnLoad = {false}
    onGetErrorMessage= {this._getErrorMessage}
/>

<Textfield
    id = {AppIDConstants.EMP_ADHAR_NO}
    type = {fieldPropertyConstants.NUMBER}
    label = {filedLabelConstants.ADHAR_NUMBER}
    required = {true}
    onChange = {this.handleChangeEvent.bind(this)}
    onGetErrorMessage= {this._getErrorMessage}
/>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
735
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если вы хотите использовать проверку отправки вместо проверки ввода, вам нужно вместо этого добавить функцию проверки в форму.

onSubmit(form) {
  form.preventDefault();
  // retrieve form values and validate here...
}

render() {
  return (
    <form onSubmit = {this.onSubmit}>
      // rest of form...
    </form>
  );
}

Не забудьте привязать форму в конструкторе

constructor(props) {
  super(props)
  this.onSubmit = this.onSubmit.bind(this)
}

Я сделал это так: <form onSubmit = {this.onSubmitEmployeeDetails} > onSubmitEmployeeDetails = (e: any) => { e.preventDefault(); // другой код }

Mittal Ahir 29.05.2019 13:29

Другие вопросы по теме