比如某一个状态,需要子父组件同时控制
use props for state
child components expose
import React, { forwardRef, useImperativeHandle } from "react";
import { useImperativeHandle } from "react";
export default function Expose() {
const exposeRef = useRef();
return (
<div>
<button onClick={() => exposeRef.current.changeValue("luyi")}>
focusInput
</button>
<button onClick={() => exposeRef.current.focus()}>
changeTextToLuYi
</button>
<FancyInput ref={exposeRef} />
</div>
);
}
const FancyInput = forwardRef(MyInput);
const MyInput = (props, ref) => {
const inputRef = useRef();
const focus = () => {
inputRef.current.focus();
};
const changeValue = () => {
inputRef.current.value = val;
};
useImperativeHandle(ref, () => {
focus, changeValue;
});
return <input ref={inputRef} />;
};