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

Question

使用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示例中复制了这个模式)？

Answer 1

在无状态组件中,您可以使用这种方法:

const TextFieldSubmit = (props) => {
  let input;

  return (
    <div className='ui input'>
      <input
        ref={node => input = node}
        type='text'
      >
      </input>
      <button
        onClick={() => {
          props.onSubmit(input.value);
          input.value = '';
        }}
        className='ui primary button'
        type='submit'
      >
        Submit
      </button>
    </div>
  );
};

有关详细信息,请访问:https://www.fullstackreact.com/p/using-presentational-and-container-components-with-redux/