使用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示例中复制了这种模式)?
您正在使用无状态组件,该ref
属性不能与这种类型的组件一起使用。
无状态组件可以看作是“静态html”,它们仅props
将给定的值作为函数的第一个参数。
他们不能拥有state
,refs
或生命周期方法。
您需要创建一个React.Component
才能使用该ref
属性。您可以通过两种方式创建此组件:
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] 删除。
我来说两句