反应forwardRef-返回使用ref

Question

当容器组件更新时，我尝试使用React.forwardRef将focus设置回TextField。在容器组件中，我正在创建如下引用：

  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
    ...//rest of the code
  }

我正在将此引用发送到这样的子组件：

 <LoginPagePresentation
    ref={this.inputRef}
    error={this.state.error}
    fnr={this.state.fnr}
    onSetFnr={(fnr) => this.setState({fnr})}
    onKeyClick={(key) => this.onKeyClick(key)}
    handleLogin={() => this.handleLogin()}/>

在LoginPagePresentation组件中，我正在使用React.forwardRef将引用转发到TextField组件：

   const LoginPagePresentation = React.forwardRef((props, ref) => (
      <TextField
          ref={ref}
          autoFocus
          //...other props>
      </TextField>

在容器组件中，每次组件更新时，我想再次将焦点重新设置为TextField，但是注销inputRef时，我得到了整个LoginPagePresentation组件，而不是{{1 }}：

TextField

这是我得到的日志，即componentDidUpdate(prevProps, prevState) { console.log(this.inputRef.current); } ：

我在做什么错，如何将ref正确设置为LoginPagePresentation，以便可以再次将焦点设置到它？

Answer 1

我猜TextField组件来自material-ui？根据{{​​3}}，获得对基础input元素的引用的正确道具是inputRef：

<TextField
    inputRef={ref}
    autoFocus
    //...other props>
</TextField>

也可以通过this.inputRef.current访问实际的DOM节点。另请参见docs：

  

访问参考

     

将ref传递到render中的元素时，   对该节点的引用可在以下位置的current属性中访问   裁判。

const node = this.myRef.current;

     

ref的值不同   取决于节点的类型：

     

  
• 在HTML元素上使用ref属性时，在{   ref的构造函数接收基础DOM   元素作为其React.createRef()属性。