- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在子组件的 useImperativeHandle Hook 中创建了一个方法。然后,我可以完美地从父组件访问它。就像下面的例子。但是,我无法从子组件访问它。换句话说,focus from parent 按钮有效,但 focus from child 不起作用。我该怎么做?
fancyInput.js
import React, { forwardRef } from "react";
const FancyInput = forwardRef((props, ref) => {
const inputRef = React.useRef();
React.useImperativeHandle(ref, () => ({
activateFocus: () => {
inputRef.current.focus();
}
}));
return (
<div>
<input ref={inputRef} />
<br /> <br />
<button onClick={() => inputRef.current.activateFocus()}>
Focus from children
</button>
</div>
);
});
export default FancyInput;
index.js
import React from "react";
import ReactDOM from "react-dom";
import FancyInput from "./fancyInput";
function App() {
const inputRef = React.useRef();
return (
<div className="App">
<FancyInput ref={inputRef} />
<br />
<button onClick={() => inputRef.current.activateFocus()}>
Focus from parent
</button>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
最佳答案
将 activateFocus
的函数声明移到 useImperativeHandle
之外,但保留其中的引用。像这样:
const FancyInput = forwardRef((props, ref) => {
const inputRef = React.useRef();
const activateFocus = () => inputRef.current.focus();
React.useImperativeHandle(ref, () => ({
activateFocus
}));
return (
<div>
<input ref={inputRef} />
<br /> <br />
<button onClick={activateFocus}>
Focus from children
</button>
</div>
);
});
关于reactjs - 从同一函数访问 Useimperativehandle 方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65517803/
我有一个带有保存按钮的组件 requestSaveAsync()}>Save 我还需要能够从应用程序的顶层调用 requestSaveAsync,因此我在名为 useEditRow 的自定义钩子(H
我在子组件的 useImperativeHandle Hook 中创建了一个方法。然后,我可以完美地从父组件访问它。就像下面的例子。但是,我无法从子组件访问它。换句话说,focus from pare
我在子组件的 useImperativeHandle Hook 中创建了一个方法。然后,我可以完美地从父组件访问它。就像下面的例子。但是,我无法从子组件访问它。换句话说,focus from pare
function App(){ const cntEl:any = React.useRef(null); // I don't know what type should be here.
我需要使用 ref获取孙组件的状态,我使用 useImperativeHandle 对其进行了自定义,简化了整个代码 here . function App() { const ref = use
我不明白为什么需要以下 useImperativeHandle、useLayoutEffect 和 useDebugValue 钩子(Hook),您能否举例说明何时可以使用它们,但请不要使用文档中的示
我需要访问子组件的位置。据我了解,要访问子属性,我需要使用 useImperativeHandle 将子 API 添加到其 ref。此外,我需要使用 forwardRef 将引用从父级传递给子级。所以
文档中提供的示例如下: function FancyInput(props, ref) { const inputRef = useRef(); useImperativeHandle(ref
我是一名优秀的程序员,十分优秀!