reactjs - 如何以编程方式将焦点设置在输入上

Question

我尝试以编程方式将焦点设置在输入上，但由于某种原因，我的代码无法正常工作。希望有人能够告诉我我做错了什么。

class ParentComponent extends React.Component {
    inputRef = React.createRef<HTMLInputElement>()

    focusInput = ()=> {
       const node = this.inputRef.current

       if(node) {
         console.log(node) // <input type="number" value />
         node.focus() // However focus is not set on the input
       }
    }

    getInputRef = ()=> {
       return this.inputRef
    }

    render(){
       return <ChildComponent getInputRef={this.getInputRef} focusInput={this.focusInput} />
    }
}

const ChildComponent: React.FC<any> = ({getInputRef, focusInput})=> (
   <React.Fragment>
       <input 
         type="number"
         ref={()=>getInputRef()}
       />
       <button onClick={()=>focusInput()}>Set Focus</button>
   </React.Fragment>
)

Answer 1

您需要使用React.forwardRef将父组件中定义的内容传递ref给功能性子组件。尝试这样的事情：

家长

class ParentComponent extends React.Component {
  inputRef = React.createRef();

  focusInput = () => {
    const node = this.inputRef.current;
    if (node) {
      node.focus();
    }
  };

  render() {
    return <ChildComponent ref={this.inputRef} focusInput={this.focusInput} />;
  }
}

孩子

const ChildComponent = React.forwardRef((props, ref) => {
  return (
    <div>
      <input ref={ref} />
      <button onClick={() => props.focusInput()}>Set Focus</button>
    </div>
  );
});

这是一个沙箱供您参考：https ://codesandbox.io/s/reactforwardref-o1jtt