陣營+終極版菜鳥 - 提交表單數據

我剛剛開始嘗試在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 
}

來源

2017-10-13 neridaj

在功能性組分反應（無狀態）不具有參。

從官方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元素或類組件：

來源

2017-10-13 23:44:14 WilomGfx

陣營+終極版菜鳥 - 提交表單數據

回答

相關問題