Реактивное поле ввода «обязательно» не работает - PullRequest
Новая
       34

Реактивное поле ввода «обязательно» не работает

0 голосов
/ 07 марта 2020

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

import React from "react";
import { createLogEntry } from "./Api";
import Show from "./Show";
export default function Form() {
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState("");
  const [state, setState] = React.useState({
    name: " ",
    description: " "
  });

  const changeHandler = e => {
    setState({ ...state, [e.target.id]: e.target.value });
  };
  const handleSubmit = async e => {
    e.preventDefault();
    setLoading(true);
    try {
      await createLogEntry({
        name: state.name,
        description: state.description
      });
    } catch (error) {
      setError(error.message);
    }
    setLoading(false);
    setState({ name: " ", description: " " });
  };
  return (
    <React.Fragment>
      <div className="app">
        <div className="row">
          <form className="col s12" onSubmit={handleSubmit}>
            {error ? <p className="error">{error}</p> : null}
            <div className="row">
              <div className="input-field col s3">
                <input
                  id="name"
                  type="text"
                  data-length="4"
                  onChange={changeHandler}
                  value={state.name}
                  required //This is where I mentioned mandatory
                />
                <label htmlFor="input_text">Topic</label>
              </div>
            </div>
            <div className="row">
              <div className="input-field col s8">
                <textarea
                  id="description"
                  className="materialize-textarea"
                  data-length="120"
                  onChange={changeHandler}
                  value={state.description}
                  required //This is where I mentioned mandatory
                ></textarea>
                <label htmlFor="textarea2">Description</label>
              </div>
            </div>
            <button
              className="btn waves-effect blue lighten-1"
              type="submit"
              name="action"
              disabled={loading}
            >
              {loading ? "Loading..." : "Create Entry"}
            </button>
          </form>
        </div>
      </div>
      <Show />
    </React.Fragment>
  );
}

Игнорировать это сообщение. Я не могу загрузить это сообщение о переполнении стека, потому что там сказано, что у меня больше кода, чем подробной информации:).

1 Ответ

0 голосов
/ 07 марта 2020

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

 const [state, setState] = React.useState({
    name: " ", // There is an extra space here
    description: " " // And here
  });

Просто удалите пробел, и проверка формы по умолчанию должна работать.

...