ein leeres Array bekommen, während in der Redux-Form mit Material-ui Einreichung Form

Question

ich redux-form mit material-ui wie besprochen here

Mein Code verwende eine folgt

import React from 'react'; 
import { Field, reduxForm } from 'redux-form'; 
import TextField from 'material-ui/TextField' 
import {Button} from 'react-bootstrap' 

const renderTextField = props => (
    <TextField hintText={props.label} 
    floatingLabelText={props.label} 
    errorText={props.touched && props.error} 
    {...props} 
    /> 
) 

let LoginForm = (props) => { 

    return (
      <form onSubmit={props.handleSubmit}> 
       <div> 
        <Field name="loginEmail" component={renderTextField} type="email" label="Email Address"/> 
       </div>    
       <div> 
        <Field name="loginPassword" component={renderTextField} type="password" label="Password"/> 
       </div> 
       <div> 
        <Button bsStyle="primary" type="submit">Login</Button> 
       </div> 
      </form> 
     ) 
} 

export default reduxForm({ 
    form: 'loginForm' 
})(LoginForm) 

Aus meiner Eltern Komponente Ich rufe es wie

loginUser = (values) => { 

     console.log(values); 
} 
render() { 
    .... 
    <LoginForm onSubmit={this.loginUser}/> 
    ... 
} 

Allerdings ist mir ein leeres Objekt in der Loginuser-Funktion Konsole bekommen, wenn ich auf klicken sie auf Senden, aber Tonne.

Ich erkannte, dass, wenn ich component={renderTextField} zu component="input" in der redux Form ändere, ich den Wert in der loginUser Funktion onSubmit bekomme.

Ich bin mit redux-form v6.7.0

Sie mir bitte, wenn Sie mehr Informationen benötigen.

Vielen Dank für jede Hilfe

Answer 1

Das Redux-Form-Dokument, das 6.0.0-rc.1 auf eine Version darauf verwiesen wurde, während die Version v6.7.0 wurde verwendet. Rendern das Textfeld wie

const renderTextField = props => (
    <TextField hintText={props.label} 
    floatingLabelText={props.label} 
    errorText={props.touched && props.error} 
    {...props} 
    /> 
) 

gab eine Warnung

Warning: Unknown props `input`, `meta` on <input> tag. Remove these props from the element. For details, see 'https://../react-unknown-prop' 
    in input (created by TextField) 
    in div (created by TextField) 
    in TextField (created by renderTextField) 
    in renderTextField (created by ConnectedField) 
    in ConnectedField (created by Connect(ConnectedField)) 
    in Connect(ConnectedField) (created by Field) 
    in Field (created by LoginForm) 
    in div (created by LoginForm) 
    in form (created by LoginForm) 
    in LoginForm (created by Form(LoginForm)) 

, die vorgeschlagen, dass die Requisiten TextField- anders werden muss, übergeben. Der richtige Weg zu renderTextField ist wie

const renderTextField = ({input, label, meta: {touched, error}, ...custom}) => (
    <TextField 
    style={{width: '80%'}} 
    hintText={label} 
    floatingLabelText={label} 
    errorText={touched && error} 
    {...input} 
    {...custom} 
    /> 
) 

Die Dokumentation für Version 6.7.0here ist.