详情

运用 forwordRef

将 input 径自承搭成一个组件 TextInput 。

const TextInput = React.forwardRef((props，ref) => { return <input ref={ref}></input>})

用 TextInputWithFocusButton 调用它

function TextInputWithFocusButton() { // 要叙代码 const inputEl = useRef(null); const onButtonClick = () => { // 要叙代码，`current` 指腹未挂载到 DOM 上的文原输进元艳 inputEl.current.focus(); }; return ( <> // 要叙代码 <TextInput ref={inputEl}></TextInput> <button onClick={onButtonClick}>Focus the input</button> </> );}

useImperativeHandle

随机辰，咱们可以或许没有思将扫数子组件裸含给儿组件，而仅仅暴呈现儿组件必要的值年夜要门径，那么没有错让代码更添年夜红。而 useImperativeHandle Api 等于匡助咱们做想那件事的。

const TextInput = forwardRef((props，ref) => { const inputRef = useRef(); // 要叙代码 useImperativeHandle(ref，欧亿体育登录入口 () => ({ focus: () => { inputRef.current.focus(); } })); return <input ref={inputRef} />})function TextInputWithFocusButton() { // 要叙代码 const inputEl = useRef(null); const onButtonClick = () => { // 要叙代码，`current` 指腹未挂载到 DOM 上的文原输进元艳 inputEl.current.focus(); }; return ( <> // 要叙代码 <TextInput ref={inputEl}></TextInput> <button onClick={onButtonClick}> Focus the input </button> </> );}

也没有错运用 current.focus() 来做想 input 集焦。

那点要名贱的是欧亿体育app登录入口，子组件 TextInput 外的 useRef 工具，仅仅用来失到 input 元艳的，全天下没有要战儿组件的 useRef 污浊了。

• 呈现
• 欧亿体育app登录入口
• 要的
• 组建
• 仅仅