如何正确设置对React组件的引用?

地亚哥

使用React与react-redux,我试图获取此登录表单:

import React from 'react'
import RaisedButton from 'material-ui/lib/raised-button';
import TextField from 'material-ui/lib/text-field';
const LoginButton = () => (
  <form>
    <div>
      <TextField hint="E-mail" floatingLabelText="E-mail" ref="emailInput"></TextField><br/>
    </div>
    <div>
      <TextField hint="Contraseña" floatingLabelText="Contraseña" type="password" ref="passwordInput"></TextField><br/><br/>
    </div>
    <div>
      <RaisedButton label="Acceder" primary={true} onClick={e => {
          console.log(emailInput.value);
        }}/>
    </div>
  </form>
);

export default LoginButton;

同时,它被用作:

import React from 'react'
import Card from 'material-ui/lib/card/card';
import CardActions from 'material-ui/lib/card/card-actions';
import CardHeader from 'material-ui/lib/card/card-header';
import CardText from 'material-ui/lib/card/card-text';
import CardTitle from 'material-ui/lib/card/card-title';
import RaisedButton from 'material-ui/lib/raised-button';

import Paper from 'material-ui/lib/paper';
import { Link } from 'react-router'
import LoginForm from '../containers/LoginForm'

const divStyle = {
  marginTop: '100px'
};

const paperStyle = {
  padding: '25px'
}

const Login = () => (
  <div className="row center-md" style={divStyle}>
    <div className="col-md-6">
      <div className="box">
        <Paper zDepth={4} style={paperStyle}>
          <div>
            <h1>Acceder</h1>
          </div>
          <LoginForm />
        </Paper>
      </div>
    </div>
  </div>
);

export default Login;

所以运行这个我得到:

Uncaught Invariant Violation: Stateless function components cannot have refs.

所以我有一些问题,该如何解决该错误?是什么让我能够导出这样的组件而不是使用它导出的魔力React.createClass(我已经从几个react / redux示例中复制了这种模式)?

塔西西奥·泽维尔·格鲁皮

tl; dr

您正在使用无状态组件,该ref属性不能与这种类型的组件一起使用。

长答案

无状态组件可以看作是“静态html”,它们仅props将给定的值作为函数的第一个参数。

他们不能拥有staterefs生命周期方法

您需要创建一个React.Component才能使用该ref属性。您可以通过两种方式创建此组件:

如果您不使用ES6或需要使用该 mixins 属性,则应该执行以下操作:
var React = require("react");

module.exports = React.createClass({
  render() {
    return (
      <form>
        <div>
          <TextField hint="E-mail" floatingLabelText="E-mail" ref="emailInput"></TextField><br/>
        </div>
        <div>
          <TextField hint="Contraseña" floatingLabelText="Contraseña" type="password" ref="passwordInput"></TextField><br/><br/>
        </div>
        <div>
          <RaisedButton label="Acceder" primary={true} onClick={e => {
              console.log(emailInput.value);
            }}/>
        </div>
      </form>
    );
  }
});
如果您使用的是ES6
import React, { Component } from "react"

export default class Form extends Component {
  render() {
    return (
      <form>
        <div>
          <TextField hint="E-mail" floatingLabelText="E-mail" ref="emailInput"></TextField><br/>
        </div>
        <div>
          <TextField hint="Contraseña" floatingLabelText="Contraseña" type="password" ref="passwordInput"></TextField><br/><br/>
        </div>
        <div>
          <RaisedButton label="Acceder" primary={true} onClick={e => {
              console.log(emailInput.value);
            }}/>
        </div>
      </form>
    );
  }
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何为打字稿中的主题功能组件正确设置/使用引用+ React Native

来自分类Dev

如何设置 React 组件的样式

来自分类Dev

如何从组件容器设置 React 组件的样式?

来自分类Dev

如何使用useState在React功能组件中的循环中正确设置状态

来自分类Dev

如何在React功能组件中正确设置setInterval计时器?

来自分类Dev

如何在React中引用组件的props?

来自分类Dev

我如何让它引用 React 组件?

来自分类Dev

如何正确设置子组件和父组件的状态?

来自分类Dev

react组件的异步渲染,如何设置全局Loading组件?

来自分类Dev

如何使用凉亭组件文件的正确路径设置节点项目

来自分类Dev

正确卸载 React 组件

来自分类Dev

了解如何在React组件中引用属性

来自分类Dev

如何在scalsjs-react中获取对组件的引用?

来自分类Dev

如何引用react-leaflet组件的小叶层?

来自分类Dev

如何正确地对React组件进行单元测试?

来自分类Dev

如何在react-router中正确键入组件属性?

来自分类Dev

如何在Typescript中正确键入React ErrorBoundary类组件?

来自分类Dev

如何在React App中正确导入组件?

来自分类Dev

如何正确编写可以接收道具的React类组件?

来自分类Dev

如何正确更新子组件 React.js

来自分类Dev

如何使用React正确设置react-router-dom链接

来自分类Dev

React:创建和引用动态组件引用

来自分类Dev

如何在渲染中为React组件设置动画?

来自分类Dev

如何在React子组件中设置事件处理程序

来自分类Dev

如何在React的视频端设置组件的状态?

来自分类Dev

如何在React中轻松设置兄弟组件的状态?

来自分类Dev

如何在React组件构造函数中设置setInterval?

来自分类Dev

如何在React中的组件上设置条件属性

来自分类Dev

如何在React中设置嵌套组件的样式?

Related 相关文章

  1. 1

    如何为打字稿中的主题功能组件正确设置/使用引用+ React Native

  2. 2

    如何设置 React 组件的样式

  3. 3

    如何从组件容器设置 React 组件的样式?

  4. 4

    如何使用useState在React功能组件中的循环中正确设置状态

  5. 5

    如何在React功能组件中正确设置setInterval计时器?

  6. 6

    如何在React中引用组件的props?

  7. 7

    我如何让它引用 React 组件?

  8. 8

    如何正确设置子组件和父组件的状态?

  9. 9

    react组件的异步渲染,如何设置全局Loading组件?

  10. 10

    如何使用凉亭组件文件的正确路径设置节点项目

  11. 11

    正确卸载 React 组件

  12. 12

    了解如何在React组件中引用属性

  13. 13

    如何在scalsjs-react中获取对组件的引用?

  14. 14

    如何引用react-leaflet组件的小叶层?

  15. 15

    如何正确地对React组件进行单元测试?

  16. 16

    如何在react-router中正确键入组件属性?

  17. 17

    如何在Typescript中正确键入React ErrorBoundary类组件?

  18. 18

    如何在React App中正确导入组件?

  19. 19

    如何正确编写可以接收道具的React类组件?

  20. 20

    如何正确更新子组件 React.js

  21. 21

    如何使用React正确设置react-router-dom链接

  22. 22

    React:创建和引用动态组件引用

  23. 23

    如何在渲染中为React组件设置动画?

  24. 24

    如何在React子组件中设置事件处理程序

  25. 25

    如何在React的视频端设置组件的状态?

  26. 26

    如何在React中轻松设置兄弟组件的状态?

  27. 27

    如何在React组件构造函数中设置setInterval?

  28. 28

    如何在React中的组件上设置条件属性

  29. 29

    如何在React中设置嵌套组件的样式?

热门标签

归档