Reagieren + Redux Noob - Einreichen Daten

Question

Ich habe gerade angefangen habe versucht, reagieren nach ein paar Tutorials auf Redux und Reagieren und ich einen Fehler in der Konsole bekommen:

Warnung: Stateless Funktionskomponenten kann nicht refs erhalten (Siehe ref "Benutzername" in FieldGroup von Login erstellt). Versuche, auf diese Referenz zuzugreifen, werden fehlschlagen.

Was ist der richtige Weg, Formularfeldeingabewerte an meine Übergabeschaltfläche zu übergeben? Sollen diese Werte in den Redux-Shop gehen? Nach dem Lesen der Dokumente: https://reactjs.org/docs/refs-and-the-dom.html#a-complete-example scheint es, dass ich Refs in diesem Fall vermeiden sollte. Also, ohne Referenzen, wie bekomme ich die Eingabewerte auf den Submit-Button? Danke für jede Hilfe.

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 
} 

Answer 1

Funktionskomponenten in reagieren (stateless) haben keine Refs.

von den offiziellen docs

Refs und Funktionskomponenten Sie nicht das Attribut ref auf funktionale Komponenten verwenden können, weil sie Instanzen nicht haben:

eine ES6 Klasse Verwenden Sie stattdessen, wenn Sie Refs benötigen, wenn nicht this.state von Ihrer Parent Login Komponente mit Klassensyntax verwenden und verwenden Sie stattdessen mit this.setState(yourState), wenn der Eingabewert auf Ihrem FieldGroup

ändert

Und dann in Ihrem würden Sie

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) 
    } 

Vom docs tun:

können Sie jedoch das Attribut ref in einem funktionalen Komponente verwenden, solange Sie auf ein DOM-Element beziehen oder eine Klassenkomponente: