阵营+终极版菜鸟 - 提交表单数据

问题描述：

我刚刚开始尝试在Redux的一些教程后反应和反应，我在控制台收到一个错误：阵营+终极版菜鸟 - 提交表单数据

警告：无状态的功能组件不能给予参考（请参阅参考通过登录创建的FieldGroup中的“用户名”）。试图访问这个裁判将失败。

什么是传递表单字段输入值到我的提交按钮的正确方法？这些值是否应该进入redux商店？阅读文档后：https://reactjs.org/docs/refs-and-the-dom.html#a-complete-example似乎我应该避免在这种情况下参考。所以，没有参考如何获得提交按钮的输入值？谢谢你的帮助。

Login.jsx

import React, {Component, PropTypes} from 'react'; 
import {Row, Col, FormControl, FormGroup, ControlLabel, HelpBlock, Checkbox, Button} from 'react-bootstrap'; 

export default class Login extends Component { 

    render() { 
    const { errorMessage } = this.props; 
    function FieldGroup({ id, label, help, ...props }) { 
     return (
     <FormGroup controlId={id}> 
      <ControlLabel>{label}</ControlLabel> 
      <FormControl {...props} /> 
      {help && <HelpBlock>{help}</HelpBlock>} 
     </FormGroup> 
    ); 
    } 

    const formInstance = (


      <Col xs={12} md={8} mdOffset={2}> 
      <code>&lt;{'Col xs={12} md={8}'} /&gt;</code> 
      <form> 
       <FieldGroup 
       id="formControlsEmail" 
       type="email" 
       label="Email address" 
       placeholder="Enter email" 
       ref="username" 
       /> 
       <FieldGroup 
       id="formControlsPassword" 
       label="Password" 
       type="password" 
       ref="password" 
       /> 
       <Checkbox checked readOnly> 
       Checkbox 
       </Checkbox> 

       <Button type="submit" onClick={(event) => this.handleClick(event)}> 
       Submit 
       </Button> 
       {errorMessage && 
       <p>{errorMessage}</p> 
       } 
      </form> 
      </Col> 

    ); 
    return formInstance; 
    } 

    handleClick(event) { 
    const username = this.refs.username 
    const password = this.refs.password 
    const creds = { username: username.value.trim(), password: password.value.trim() } 
    this.props.onLoginClick(creds) 
    } 
} 

Login.propTypes = { 
    onLoginClick: PropTypes.func.isRequired, 
    errorMessage: PropTypes.string 
}

答

在功能性组分反应（无状态）不具有参。

从官方docs

参考文献和功能部件不得使用ref属性的功能部件，因为他们没有实例：

如果使用ES6类代替需要参考，如果不使用this.state从您的父Login组件类语法和使用，而不是this.setState(yourState)当输入值更改您的

，然后在你会做

handleClick(event) { 
    const username = this.state.username 
    const password = this.state.password 
    const creds = { username: username.value.trim(), password: password.value.trim() } 
    this.props.onLoginClick(creds) 
    }

从docs：

你可以，但是，使用功能组件内的ref属性，只要你引用一个DOM元素或类组件：

阵营+终极版菜鸟 - 提交表单数据

相关推荐