Question

遵循此示例https://reactjs.org/docs/refs-and-the-dom.html我将ref回调从父级传递给子级作为道具。

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

在父组件和子组件中使用ref元素

1 个答案: