Javascript 在父组件和子组件中使用对DOM元素的引用

下面的示例中，我将把父对象的

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>
  );
}

函数搜索输入（inputRef）{
函数onCLick（）{
//剂量和。。。
//使用ref关注输入元素
}
返回(
);
}
函数父级（道具）{
函数聚焦搜索工具（）{
如果（搜索元素）
searchElement.focus（）；
}
返回(
我的输入：searchElement=element}/>
);
}

虽然通过

focussearchement

在父级中设置的焦点工作正常，但我无法将焦点设置为

SearchInput

组件的输入

---

我想完成的是在

onCLick

函数中设置焦点，但我不确定这是否可行，如果可行，如何实现。

下面是一个小示例：

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>
    );
}

函数SearchInput（{inputRef:refCallback}）{
让inputRef；
函数onClick（）{
inputRef.focus（）；
}
函数inputRefHandler（ref）{
inputRef=ref；
ref回调（ref）；
}
返回(
输入焦点
);
}
函数父级（道具）{
让搜索元素；
函数聚焦搜索工具（）{
如果（搜索元素）
searchElement.focus（）；
}
返回(
父焦点
我的输入：searchElement=element}/>
);
}