(P)函數ChildComponent中的react觸發方法

Question

我正在 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>
  );
}

Answer 1

試試下面。 希望它會有所幫助

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