在React Hooks中的父组件中单击按钮时设置对子组件输入的焦点,可以通过以下步骤实现:
const [inputFocus, setInputFocus] = useState(false);
useEffect(() => {
if (inputFocus) {
inputRef.current.focus();
}
}, [inputFocus]);
其中,inputRef是一个在子组件中创建的ref对象,用来获取子组件中的input元素。
const handleClick = () => {
setInputFocus(true);
}
<button onClick={handleClick}>设置焦点</button>
完整的父组件代码示例:
import React, { useState } from "react";
import ChildComponent from "./ChildComponent";
const ParentComponent = () => {
const [inputFocus, setInputFocus] = useState(false);
const handleClick = () => {
setInputFocus(true);
}
return (
<div>
<button onClick={handleClick}>设置焦点</button>
<ChildComponent inputFocus={inputFocus} />
</div>
);
};
export default ParentComponent;
完整的子组件代码示例:
import React, { useEffect, useRef } from "react";
const ChildComponent = ({ inputFocus }) => {
const inputRef = useRef(null);
useEffect(() => {
if (inputFocus) {
inputRef.current.focus();
}
}, [inputFocus]);
return (
<div>
<input ref={inputRef} type="text" />
</div>
);
};
export default ChildComponent;
这样,当父组件中的按钮被点击时,子组件中的input元素将获得焦点。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云