Как применить проверку ввода в React Hooks - PullRequest
Новая
       5

Как применить проверку ввода в React Hooks

0 голосов
/ 26 апреля 2020

Я новичок в ReactJS Крючки. Я искал четкий пример проверки формы, но не получил. Поэтому я решил написать простой вопрос, который любой может легко понять.

Предположим, у меня есть два поля ввода, типа number и типа text

const [values, set_values] = useState({first_input:'',second_input:''});

const handle_change = (e) => {
  let name = e.target.name
  let value = e.target.value;
  values[name] = value;
  set_values(values);
}

const test_validation () => {
  // I used to do it this way
  if(document.getElementsByName('first_input')[0].value==''){
    alert("first input is required")
  }
}

return(
  <div>
    <input onChange={handle_change} name='first_input' type='number' />
    <input onChange={handle_change} name='second_input' type='text' />

    <input type='submit' onClick={test_validation} />
  <div/>
)

Это неправильно использовать чистый JS для проверки значения ввода и установки условий, или же предпочтительнее использовать формы проверки React?

Я пытался установить атрибут required в теге элемента ввода, чтобы его нельзя было пропустить, но не работает.

Мне нужно alert() предупреждающее сообщение для требуемого файла или highlight или focus на нем.

Ответы [ 3 ]

2 голосов
/ 26 апреля 2020

Ваш метод обновления входных значений в функции handle_change неверен. Значения являются константой и не могут быть изменены напрямую. Используйте оператор распространения ES6 с set_values ​​для обновления значений. 

set_values({...values, [name]:value});
1 голос
/ 26 апреля 2020

Вот минимальный пример того, как обрабатывать проверку:

В большинстве случаев вам не нужно напрямую манипулировать DOM API с помощью React. Также убедитесь, что вы делаете e.preventDefault при проверке, иначе событие будет распространяться из-за всплывающего события 

import React, { useState } from "react";

export default function App() {
  const [values, setValues] = useState({ numberInput: "", textInput: "" });

  const validation = e => {
    if (values.numberInput === '' || !values.textInput) {
      e.preventDefault();
      alert("numberInput and textInput are required");
    }
  };

  return (
    <div>
      <form
        onSubmit={e => {
          e.preventDefault();
          alert("submit ");
        }}
      >
        <input
          onChange={({ target }) => setValues({ numberInput: target.value })}
          name="numberInput"
          type="number"
        />
        <input
          onChange={({ target }) => setValues({ textInput: target.value })}
          name="textInput"
          type="text"
        />

        <input type="submit" onClick={validation} />
      </form>
    </div>
  );
}
1 голос
/ 26 апреля 2020

Во-первых, ваша функция обновления на самом деле не работает должным образом.

Попробуйте вместо этого: 

const handle_change = (e) => {
  let name = e.target.name
  let value = e.target.value;
  set_values({ ...values, [name]: value });
}

Тогда лучший способ - контролировать элементы <input /> компоненты.

Например, для first_input сделайте следующее: 

<input onChange={handle_change} name='first_input' type='number' value={values.first_input} />

Тогда ваша проверка может выглядеть так: 

const test_validation () => {
  if(values.first_input === ''){
    alert("first input is required")
  }
}

Это должно успешно вызвать alert вы надеялись, когда value будет пустой строкой.

...