如何以编程方式将焦点设置为输入

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 将 Parent 组件中定义的 ref 传递给功能性 Child 组件。尝试这样的事情：

Parent

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

Child

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

如何以编程方式将焦点设置为输入

How to programmatically set focus on input

ref

typescript

reactjs