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