使用 react-hook-form 注冊第三方/自定義組件

Question

我正在使用react-hook-form並使用第三方DatePicker 。 因為它是一個自定義組件，使用它作為受控組件來注冊它。 這工作正常

<Controller
    control={control}
    name="reviewStartDate"
    render={({ field: { onChange, onBlur, value } }) => (
        <DatePicker
            className={`form-control ${errors.reviewStartDate ? 'is-invalid' : ''}`}
            customInput={<input />}
            wrapperClassName="datePicker"
            onChange={onChange}
            onBlur={onBlur}
            selected={value ? new Date(value) : ''}
            dateFormat='dd-MMM-yyyy'
        />
    )}
/>

同樣/但是，我正在使用第三方Multiselect 。 這里的值沒有被注冊。 它確實顯示了選定的值，但是當我提交表單時，數據中不存在該值。

<Controller
    control={control}
    name="rootCauseAnalysisCategory"
    render={({ field: { value } }) => (
        <Multiselect
            options={rootCauseAnalysisCategorys}
            isObject={false}
            showCheckbox={true}
            hidePlaceholder={true}
            closeOnSelect={false}
            selectedValues={value}
        />
    )}
/>

相似地

Answer 1

<MultiSelect />組件具有onSelect和onRemove ，因此您可以將onChange傳遞給它們。 這將起作用，因為它們都具有第一個參數是包含當前選定值的數組的簽名。

<Controller
  control={control}
  name="rootCauseAnalysisCategory"
  defaultValue={[]}
  render={({ field: { value, onChange } }) => (
    <Multiselect
      options={rootCauseAnalysisCategorys}
      isObject={false}
      showCheckbox={true}
      hidePlaceholder={true}
      closeOnSelect={false}
      onSelect={onChange}
      onRemove={onChange}
      selectedValues={value}
    />
  )}
/>

更新

如果要訪問rootCauseAnalysisCategory的當前值，則必須使用watch 。 請注意，在<Controller />字段級別提供defaultValue或使用defaultValues調用useForm也很重要。 在示例中，我在字段級別傳遞了defaultValue 。

function App() {
  const { control, handleSubmit, watch } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };

  const rootCauseAnalysisCategorys = ["Category 1", "Category 2"];

  const rootCauseAnalysisCategory = watch("rootCauseAnalysisCategory");

  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit)}>
        <Controller
          control={control}
          name="rootCauseAnalysisCategory"
          defaultValue={[]}
          render={({ field: { value, onChange } }) => (
            <Multiselect
              options={rootCauseAnalysisCategorys}
              isObject={false}
              showCheckbox={true}
              hidePlaceholder={true}
              closeOnSelect={false}
              onSelect={onChange}
              onRemove={onChange}
              selectedValues={value}
            />
          )}
        />

        {rootCauseAnalysisCategory?.includes("Category 1") && <p>Category 1</p>}

        <input type="submit" />
      </form>
    </div>
  );
}