(P) метод триггера реакции в функциональном ChildComponent

Я создаю форму в Preact и изо всех сил пытаюсь проверить ввод при отправке формы.

Компонент <TextInput> получает объект проверки от validate.js и обрабатывает проверку самостоятельно.

Родительский компонент — это форма, которая хранит данные в состоянии formData и отправляет значения в API.

Перед отправкой я хочу снова проверить данные, чтобы пользователь не пропустил некоторые необходимые входные данные.

Вопрос. Как решить эту проблему?

Вход:

export default function TextInput({ onChange, validation }) {
  const [value, setValue] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    onChange && onChange(value);
  }, [value]);

  const handleBlur = (e) => {
    const value = e.currentTarget.value;

    if (validation) {
      const errors = validate.single(value, validation);

      if (errors) {
        setError(errors[0]);
      }
    }
  };

  return (
    <input
      type="text"
      onBlur={handleBlur}
      onInput={e => setValue(e.target.value)}
      onFocus={() => setError(null)}
    />
    // show some error msg. if error is set 
  );
}

Форма:

export default function CompetitionForm() {
  const [formData, setFormData] = useState({});

  const submitForm = async (e) => {
    e.preventDefault();
    // validate data, submit the form
  };

  const competitionTextInput = (key) => {
    return (
      <TextInput
        name={key}
        validation={RULES[key]}
        onChange={value => {
          formData[key] = value;
          setFormData(formData);
        }}
      />
    );
  };

  return (
    <form className="c-form" onSubmit={submitForm}>
      <div className="row mb-4">
        <div className="col-12 col-md-6">
          {competitionTextInput('firstName')}
        </div>
        <div className="col-12 col-md-6">
          {competitionTextInput('lastName')}
        </div>
      </div>
    </form>
  );
}

reactjs javascript components preact
person Robin    schedule 14.02.2020    source источник
comment
stackoverflow.com/questions/60161556/ посмотрите на мой ответ на этот вопрос, это поможет выполнить проверку вручную   -  person Oshini    schedule 14.02.2020

Ответы (1)


arrow_upward
0
arrow_downward

попробуйте ниже. надеюсь, это поможет

  //Form:

  const submitForm = async (e) => {
    e.preventDefault();
    e.stopPropagation();
    // validate data, submit the form
  };

  render() {
    const { validated } = this.state;
    ......
   return (
    <Form noValidate validated={validated} onSubmit={submitForm}>
    </form>
     );
  }
person Oshini    schedule 14.02.2020