问题标签 [react-ref]

我正在使用 react ref 设置 textarea 的 selectionRange ，但这与 react "way" 相矛盾。

裁判工作完美。

我想使用状态设置 textarea 的 selectionRange，而不是参考（就像在这个代码片段中一样）

我正在尝试使用 react-hooks 使用 useref，但是当我调用 setAccountVal 方法时，尽管当我提醒它仍然是“Ege”的值时孩子的状态发生了变化。你对这个案子有什么想法吗？

当我调用普通方法时，我可以看到我想要什么。但问题是我可以在 acc 状态上看到新的状态值，但是当我从父级获取它时，它显示的是旧的（实际上是初始状态 val（“Ege”））状态值。

编辑：其实我想要做的是下面

好的！我找到了解决方案。现在，当我将 ref 变量与 getter setter 一起使用时，我还可以使用 useRef 设置获取当前值！

详细演示：

.

我正在关注 styled-components 中的文档如何解释refs在库的 v4 中使用：https ://www.styled-components.com/docs/advanced#refs

但是，这实际上似乎不起作用。ref prop 抱怨在创建 aReact.RefObject并将其设置为refstyled-component 时使用了错误的类型。

这是我到目前为止所做的：

然后我创建了一个 refObject 并在我的构造函数中初始化它：

this.flyoutRef = React.createRef();

现在，当将其设置为样式组件上的 ref 时，它不会启动并且还会显示错误：

<_Wrapper ref={this.flyoutRef} >{children}</_Wrapper>

TS显示的错误是这样的：

Type 'Ref<HTMLElement>' is not assignable to type 'string | (string & ((instance: HTMLDivElement | null) => void)) | (string & RefObject<HTMLDivElement>) | (((instance: Component<ThemedOuterStyledProps<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any>, any, any> | null) => void) & string) | ... 6 more ... | undefined'.

根据 styled-components 的文档，我正在实现它的显示方式。我什至尝试使用forwardRef各种示例所示的方法，但错误仍然相同。

以下是我使用 forwardRef 构造样式组件的方式：

我仍然像以前一样使用它：

<_Wrapper ref={this.flyoutRef} >{children}</_Wrapper>

现在显示此错误：

Type 'Ref<HTMLElement>' is not assignable to type '(string & ((instance: {} | null) => void)) | (string & RefObject<{}>) | (((instance: Component<ThemedOuterStyledProps<WithOptionalTheme<RefAttributes<{}>, any>, any>, any, any> | null) => void) & ((instance: {} | null) => void)) | ... 4 more ... | undefined'.

那么样式组件中的文档是错误的吗？还是我错过了需要在这里转发的东西？我非常感谢您澄清这里发生的事情，提前感谢您的帮助。

版本：

样式组件：4.1.3

反应：16.8.3

我有一个使用钩子的功能组件。

当 editMode 更改为 true 时 - 输入字段正在出现，我希望它显示其中已选择的文本。我怎样才能做到这一点？

以下是我的源代码，我在其中尝试获取组件的引用并检查单击是否发生在组件外部，但由于未定义而出现错误。让我知道我在这里做错了什么。

代码 -

在一年不使用 React 后，现在回到 React，并注意到我们使用 Refs 的方式发生了一些变化。我已经多次阅读该部分关于我们应该如何使用回调并查看示例，但我仍然不能 100% 确定我在表单中正确使用了引用。

我已经阅读了文档和示例，但我的方式似乎既不适合旧方式，也不适合新方式，所以有点难过。

[编辑] 为了清楚起见，我只是在处理表单上的提交并将其传递回另一个组件，但我想检查他们处理表单中引用的方式是否正常。抱歉，如果不清楚。

通常，有了道具，我们可以写

为了检测道具变化。

但是如果我们使用React.createRef()，我们如何检测 ref 何时更改为新的组件或 DOM 元素？React 文档并没有真正提及任何内容。

铁，

我们是否应该自己实现某种旧值的东西？

铁，

这是我们应该做的吗？我原以为 React 会为此添加一些简单的功能。

我有一个 react-big-calendar，当我点击它时，它有一个按钮，他的模式会出现，我还有一个日历图标按钮，可以将我重定向到另一个 URL /计划。

我有一个对话框（AjouterDisponibilite），我用组件议程上的 ref 调用它。

日历图标有一个onClick我尝试的事件：

但是当我运行它并单击图标时，URL 是正确的，但我得到error如下所示：

TypeError: Cannot read property 'handleAjouter' of null和 Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method

刷新此页面后，它就可以工作了。

我的代码是：https ://codesandbox.io/s/xw01v53oz

我该如何解决？

我知道这里已经问过同样的问题，但我仍然无法解决这个问题

我有多个用户位置坐标，我想在单击一次按钮时显示带有用户名的所有位置工具提示

也试过这个：https ://github.com/facebook/react/issues/1899#issuecomment-234485054

我也检查了这个问题，但它仅适用于一个标记，而我需要一起显示所有标记的工具提示。

上述问题的答案并不能完全满足我的要求，我已经用不同的方式尝试了一切，但仍然需要你的帮助来完成要求。

我可以在反应应用程序中使用 js 创建 svg 及其所有子组件（如 rect 等）。但是我不能给元素 ref 属性。如果我看到生成的源代码，它的 ref=[object Object]，因此它不起作用。代码在 componentDidMount 中调用，在 appendChild 之后。所以它应该可以工作，因为它已经在 DOM 中呈现（不是吗？）。ref 适用于 svg 元素（如果不是动态创建的）。有人可以指导我正确的方向吗？

即使使用 React 的 createElement 函数也可以： React.createElement('rect', {key: "myKey", width: 100, height: 100, ref: myRef}) 但它并没有创建真正的 DOM 节点，可以与 appendChild 函数一起使用（错误消息说明了这一点）。所以我也不能真正使用它。clipPathRef.current 返回包含的 clipPath 元素，当然可以。rect 元素被创建和渲染，它只是没有正确的 ref 属性。