(P) метод срабатывания триггера в функционале ChildComponent - PullRequest
Новая
       8

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

0 голосов
/ 14 февраля 2020

Я создаю форму в 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>
  );
}

1 Ответ

0 голосов
/ 14 февраля 2020

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

  //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>
     );
  }
...