React + Typescript 使用 useRef 和 forwardRef 引用選擇元素

Question

我有一個使用useRef鈎子的主要組件和一個使用forwardRef鈎子和Select元素的子組件。 我需要的是獲取select元素的值。 我可以在onChange事件上使用useState鈎子，但它在我更改值時有效，但在我以編程方式設置時不起作用，所以我使用useRef鈎子來獲取值。 但問題是，當我使用linkRef.current.value它不提供最新值，而是提供舊值。

以編程方式我的意思是它的選項取決於另一個父select元素，所以當它的父選項更改時，它的值會自動更新。 假設它的選擇值為9並且父選項更改它的值將更改為1 。 但是當我嘗試linkRef.current.value它給出了9而不是新值1 。

這是我的代碼示例：

主要組件

const linkRef = useRef<HTMLSelectElement>(document.createElement('select'))

const func = () => {
    console.log(linkRef)
}

<Dropdown
  props={props}
  ref={linkRef}
/>

下拉組件

import React, {
  forwardRef,
  Ref,
  MutableRefObject
} from 'react'
const Dropdown = forwardRef(
  (
    props: Props,
    ref: Ref<HTMLSelectElement>
  ) => {
    const {value,options} = props
    return ( 
     <DropdownSelect 
      value={value}
      ref={ref}
      >
       {
        options.map((option, i) => ( 
         <option value={option}> 
           {option} 
         </option>
        ))
      } 
      </DropdownSelect>
    )
  }
)

非常感謝。

Answer 1

有很多事情我會在這里改變。 首先，@BennettDams 評論說使用 refs 確實不是解決此問題的最佳方法是正確的。 事實上，您可能會看到這條警告告訴您不要這樣做。

警告：失敗的道具類型：您在沒有onChange處理程序的情況下向表單字段提供了value道具。 這將呈現只讀字段。 如果該字段應該是可變的，請使用defaultValue 。 否則，設置onChange或readOnly 。

轉發引用時，您需要將引用直接傳遞給 DOM 元素或轉發引用的組件。 所以你可以在select上設置ref={ref} ，但我不確定DropdownSelect 。

看起來您的選項只是普通字符串？ 如果您可以為每個選項使用唯一的鍵，React 會更喜歡它。 將選項作為對象還允許您選擇任何類型而不僅僅是字符串。 像這樣的東西：

interface Option<T> {
  key: string;
  value: T;
  label: string;
}

但我不想讓這太復雜，所以現在讓我們堅持使用字符串。 你想要的是這樣的：

interface DropdownProps {
  value: string;
  onChangeValue(value: string): void;
  options: string[];
}

const Dropdown = (props: DropdownProps) => {
  const { value, options, onChangeValue } = props;
  return (
    <select value={value} onChange={(e) => onChangeValue(e.target.value)}>
      {options.map((option) => (
        <option key={option} value={option}>
          {option}
        </option>
      ))}
    </select>
  );
};