标签: react-ref

我在我的项目中使用了一个react-mui库，我想在其中实现一个MenuList组件，可以在此处的MenuList合成下找到。在我的应用程序中，虽然我将refas发送prop到child component我有menu. 您可以在此处查看codesandbox 示例。当我从父组件发送一个方法时，如下ref所示setRef：props

state = {
    open: false,
    ref: React.createRef()
  };

  setRef = element => {
    this.setState({ ref: element });
  };

  handleToggle = () => {
    this.setState(state => ({ open: !state.open }));
  };

  handleClose = () => {
    this.setState({ open: false });
  };

  render() {
    return (
      <MenuListComposition
        setRef={this.setRef}
        handleToggle={this.handleToggle}
        handleClose={this.handleClose}
        open={this.state.open}
        ref={this.state.ref}
      />
    );
  }

对于具有菜单按钮的子组件：

    <MenuButton
      className={classes.button} …

我有一个带有输入元素的组件，我想在该输入元素上触发“选项卡”按键事件，以便在发生一组特定逻辑时跳转到下一个输入元素。

我在第一个输入元素上有一个引用，我正在尝试触发按键事件，如下所示：

useEffect(() => {
  if (ref.current) {
    ref.current.focus();
    setTimeout(() => {
      ref.current.dispatchEvent(
        new KeyboardEvent("keypress", { key: "Tab" })
      );
    }, 3000);
  }
});

首先，我确保使用 选择第一个输入元素.focus()，然后 3 秒后我触发按下 Tab 键，期望看到焦点移动到下一个字段，但它似乎不起作用。

这可能看起来是一个奇怪的例子，但这只是一个原型。我实际上打算做的是，当我提交第一个输入字段时触发一些代码，这将获取一些带有附加输入字段的行，一旦呈现，我需要触发“tab”键。我想避免将引用附加到这些动态加载的输入字段，因为我觉得这会增加大量开销来跟踪引用并将其向下传递，而我所需要的只是利用选项卡顺序并模拟按键来选项卡到加载后第一个动态加载的项目。我可以向您需要提交以填充动态字段的字段添加单个引用。

我注意到一些在线.dispatchEvent()直接调用 ref 对象的例子，但是如果我尝试这样做，我会收到一条错误消息，告诉我该函数不存在，所以我在 prop 上调用它current。不确定这是否有任何相关性。

以下是上述代码取自的原型链接：https://codesandbox.io/s/wizardly-hopper-vrh4w ?file=/src/App.js:149-441

我正在尝试使用 React Beautiful DND 库在待办事项应用程序中拖放列表，但我不断在控制台中收到这三个错误。

错误1：

Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `Droppable`.

错误2：

Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `Draggable`.

错误3：

Invariant failed: provided.innerRef has not been provided with a HTMLElement.

以下是我的代码片段。我还使用了样式组件：

import React from 'react';
import styled from 'styled-components';
import { DragDropContext, …

请在React DOCS中参考该 URL。此代码的版本也在此处提供。

我了解在里面Functional React Component，最好使用useCallback钩子来创建引用回调，如上面的React Docs URL中所示，但是我想了解如果使用简单的arrow function（内联函数）作为引用会发生什么情况打回来。

因此，在下面，我从上面的URL修改了代码以不使用该useCallback钩子。相反，我只是使用常规arrow function作为ref回调。此外，我添加了两个console.log语句。这是此 URL上也提供的代码。

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [height, setHeight] = useState(0);

  const measuredRef = node => {
    console.log("Setting height. node = ", node);
    if (node !== null) {
      setHeight(node.getBoundingClientRect().height);
    }
  };

  console.log("Rendering.");
  return (
    <div className="App">
      <h1 ref={measuredRef}>Hello, world</h1>
      <h2>The above header is {Math.round(height)}px …

我有一个待办事项列表，其中任务可以是单个大文本区域（此处称为 dataArea）或这些文本区域的列表。这些文本区域的高度应该随着内容的添加而增加，我是通过在输入时将高度设置为其滚动高度（通过handleInput）来实现的。我想做的是让人们在纯文本区域和文本区域列表之间切换（通过toggleChecklist），使用状态来存储内容。

但是，当通过状态\xe2\x80\x94而不是直接用户输入\xe2\x80\x94设置内容时，无法到达handleInput函数，我必须从不同的函数设置它或手动触发onInput。无论哪种方式，我相信我必须使用 ref (blobRef) 来访问该元素以设置其高度。但是，在切换到清单或从清单切换之后，blobRef 为 null。这是为什么？

这是在完整上下文中[不]发生的地方（我认为只有 Form.js 文件需要查看）： https: //github.com/werdnanoslen/tasks/blob/help/src/组件/Form.js#L85

这是一些代码预览：

  const blobRef = useRef(null)\n\n  ...\n\n  function handleInput(e, i) {\n    const element = e.target\n    if (checklist) {\n      let checklistDataCopy = [...checklistData]\n      checklistDataCopy[i] = { ...checklistDataCopy[i], data: element.value }\n      setChecklistData(checklistDataCopy)\n    } else {\n      setData(element.value)\n    }\n    element.style.height = \'0\'\n    element.style.height = element.scrollHeight + \'px\'\n  }\n\n  function toggleChecklist() {\n    setChecklist((prevChecklist) => !prevChecklist)\n    if (checklist) {\n      const n = String.fromCharCode(13, 10) //newline character\n      setData(checklistData.reduce((p, c) => p.concat(c.data …