import React, {
useRef,
useImperativeHandle,
useState,
forwardRef
} from "react";
function Son(props, ref) {
console.log(props);
const inputRef = useRef(null);
const [inputValue, setInputValue] = useState("");
useImperativeHandle(
ref,
() => {
const handleRefs = {
/* 声明方法用于聚焦input框 */
onFocus() {
inputRef.current.focus();
},
/* 声明方法用于改变input的值 */
onChangeValue(value) {
setInputValue(value);
}
};
return handleRefs;
},
[]
);
return (
<div>
<input placeholder="请输入内容" ref={inputRef} value={inputValue} />
</div>
);
}
const ForwarSon = forwardRef(Son);
const Index = () => {
let inputRef = null;
const handerClick = () => {
const { onFocus, onChangeValue } = inputRef;
onFocus();
onChangeValue("let us learn React!");
};
return (
<div style={{ marginTop: "50px" }}>
<ForwarSon
ref={(node) => {
inputRef = node;
}}
/>
<button onClick={handerClick}>操控子组件</button>
</div>
);
};
// class Index extends React.Component {
// inputRef = null;
// handerClick() {
// const { onFocus, onChangeValue } = this.inputRef;
// onFocus();
// onChangeValue("let us learn React!");
// }
// render() {
// return (
// <div style={{ marginTop: "50px" }}>
// <ForwarSon ref={(node) => (this.inputRef = node)} />
// <button onClick={this.handerClick.bind(this)}>操控子组件</button>
// </div>
// );
// }
// }
export default Index;
在React中使用 useImperativeHandle 和 forwardRef 操作子组件
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 如题，使用react hooks实现使用redux的效果，主要用到的钩子就是 useReducer， useCon...
- 最近我在学习 React.js 框架，在此记录一下我使用 react-router-dom 来实现单页应用（SPA...
- 在React中使用antd组件中的treeSelect组件，想要在获取当前选中节点的所有子节点。在使用onChan...
- 通过ceact-react-app搭建的React项目，在使用antd-mobile组件库中的Carousel（跑...
- 需求： 在一个table组件中使用DatePicker组件编辑当前条信息其中里面包含了时间，在我直接用的时发现如图...
