使用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和onRemoveprops，所以你可以直接传递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. defaultValue请注意，在现场提供<Controller />或useForm通过进行调用也很重要defaultValues。在示例中，我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>
  );
}