无状态函数组件不能给出refs

Question

我尝试访问我的组件中的一些引用.但我在控制台中有这个错误. withRouter.js:44 Warning: Stateless function components cannot be given refs (See ref "pseudo" in FormInputText created by RegisterForm). Attempts to access this ref will fail.

这是我的组件:

class RegisterForm extends React.Component {

  render() {
    return (
      <form action="">
        <FormInputText ref="pseudo"  type="text" defaultValue="pseudo"/>
        <input type="button" onClick={()=>console.log(this.refs);} value="REGISTER"/>
      </form>
    );
  }
}

另外,当我点击Object {pseudo: null}控制台上的按钮时.我期待一个对象null.

我不确定为什么这不起作用.请注意我的反应树使用mobx-react.

Answer 1

Refs不适用于无状态组件.它在文档中解释

由于无状态函数没有后备实例,因此无法将ref附加到无状态函数组件.

写作时的无状态组件实际上有实例(它们被内部包装到类中)但是你无法访问它们,因为React团队将来会进行优化.请参阅https://github.com/facebook/react/issues/4936#issuecomment-179909980