親要素と子要素の両方のDOM要素への参照を使用する

Question

この例の後には、 refコールバックを親から子にpropとして渡しています。

function SearchInput(inputRef) { 
    function onCLick(){ 
    //Dosomething and... 
    //Focus on input element using ref 
    } 

    return (
    <div> 
     <input ref={inputRef} onCLick={onCLick} /> 
    </div> 
); 
} 

function Parent(props) { 
function focusSearchElement() { 
    if (searchElement) 
    searchElement.focus(); 
} 

    return (
    <div> 
     My input: <SearchInput inputRef={element => searchElement = element} /> 
    </div> 
); 
} 

focusSearchElementで親に設定したフォーカスが正常に動作しますが、私はSearchInputコンポーネントからの入力にフォーカスを設定することはできませんよ。

私が達成したいのは、onCLick機能の焦点に設定されていますが、可能かどうか、もしそうなら、どうすればよいか分かりません。ここ

Answer 1

は小さな例です：

function SearchInput({inputRef: refCallback}) { 
    let inputRef; 
    function onClick(){ 
     inputRef.focus(); 
    } 

    function inputRefHandler(ref){ 
     inputRef = ref; 
     refCallback(ref); 
    } 

    return (
     <div> 
     <div> 
      <input ref={inputRefHandler}/> 
     </div> 
     <button onClick={onClick}>input focus</button> 
     </div> 
    ); 
} 

function Parent(props) { 
    let searchElement; 
    function focusSearchElement() { 
     if (searchElement) 
     searchElement.focus(); 
    } 

    return (
     <div> 
     <button onClick={focusSearchElement}>parent focus</button> 
     <div> 
      my input: <SearchInput inputRef={element => searchElement = element} /> 
     </div> 
     </div> 
    ); 
}