8

我尝试访问我的组件中的一些引用。但是我在控制台中有这个错误。 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.

4

2 回答 2

13

Refs 不适用于无状态组件。它在文档中进行了解释

因为无状态函数没有后备实例，所以不能将 ref 附加到无状态函数组件。

在撰写本文时，无状态组件实际上具有实例（它们在内部被包装到类中）但您无法访问它们，因为 React 团队将在未来进行优化。见https://github.com/facebook/react/issues/4936#issuecomment-179909980

于 2016-07-27T17:28:29.323 回答
1

您也可以尝试使用recompose它有一个名为toClass的函数。

获取一个函数组件并将其包装在一个类中。这可以用作需要向组件添加 ref 的库的后备，例如 Relay。

如果基础组件已经是一个类，则返回给定的组件。

于 2016-07-27T19:25:09.137 回答