react-select 在导入的组件中尝试将更改的值更改为父级

Question

我是第一次使用 react-select，在解决这个问题时遇到了一些麻烦。

我正在创建一个美国州选择器可重用组件。一切正常，只是我无法取回更改后的值。

有人可以看一下这个沙箱，看看您是否可以提供帮助？非常感谢。

Answer 1

您需要在这里使用 RHF 的 <Controller /> 组件而不是 register，因为 react-select 是一个外部控制组件。 Here您可以找到有关集成外部受控组件的信息。

<Controller
  name="state"
  control={control}
  defaultValue={state}
  rules={{
    required: "Please select a State"
  }}
  render={({ field: { ref, ...field } }) => (
    <StateDropDown {...field} id="state" />
  )}
/>

您还可以通过将道具传递给 <StyledSelect /> 组件来简化包装器 <StateSelectDropDown /> 组件。

export function SelectState(props: any) {
  const options = USStates.map((item: any) => ({
    label: item.value + " - " + item.label,
    value: item.value
  }));

  return (
    <StyledSelect
      {...props}
      styles={styles}
      placeholder="Select a State"
      options={options}
    />
  );
}

export default function StateSelectDropDown(props: any) {
  return <SelectState isSearchable {...props} />;
}

react-select 在导入的组件中尝试将更改的值更改为父级

react-select in an imported component trying to get changed value to parent

reactjs

react-select

react-hook-form