焦点选择元素

Question

我正在尝试以编程方式将 Material-UI 中的选择元素集中在 useEffect 块中。

尝试将 ref 传递给组件 (ref={my ref}) 本身什么也不做，并尝试传递任何种类的 inputProps={{ ref: myRef }}、inputProps={{ inputRef: myRef }} throws an error，因为当我在 ref 上调用 focus() 时 displayNode 未定义.

我确定我缺少一些明显的东西，正确的语法/方法是什么？

const MyCard = ({
  disabled,
}) => {
  const inputField = React.useRef(null);

  React.useEffect(() => {
    if (!disabled && inputField.current) {
      inputField.current.focus();
    }
  }, [inputField, disabled]);

  return (
    <Select
      disabled={disabled}
      inputProps={{ ref: inputField }}
      required
      id="answer"
      name="answer"
      autoComplete='off'
      autoFocus
    >
      <MenuItem value="option1">option1</MenuItem>
      <MenuItem value="option2">option2</MenuItem>
    </Select>
  )
}

来自 OP 的其他信息：

我需要能够以编程方式聚焦选择。自动对焦 在最初的渲染中为我工作，但不是随后，特别是 删除禁用的道具后，我正在尝试重新调整输入的焦点。

Answer 1

确保在调用focus之前检查它是否已定义：

useEffect(() => {
  if (myRef.current) {
    myRef.current.focus()
  }
}, [myRef])