kann nicht funktionieren Kind zu reagieren Komponente vorbei

Question

ich habe ein Problem, wenn ich versuche, eine Funktion zu untergeordneter Komponente passiert im Innern zeigt immer eine Nachricht mitteilen, dass

„renderTextField nicht definiert ist“

hier ist mein Code.

Formular Container

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

class LoginPage extends React.Component { 

    constructor(props) { 
    super(props); 
    this.processForm = this.processForm.bind(this); 
    } 

    processForm(data) { 
    console.log(data); 
    } 

    /* Render the component. */ 
    render() { 
    console.log(renderTextField); 
    return (
     <LoginForm 
     submitData={this.processForm} 
     renderTextfield={renderTextField} 
     /> 
    ); 
    } 

} 

Formular Kinder Komponente

class LoginForm extends React.Component{ 

     constructor(props) { 
     super(props); 
     } 

     render(){ 
     const { handleSubmit, pristine, reset, submitting, submitData, renderTextField } = this.props; 

      return(
      <Card className="container"> 
       <form onSubmit={handleSubmit(submitData)}> 
       <h2 className="card-heading">Login</h2> 

       <div className="field-line"> 
        <Field name="email" component={renderTextField} label="Email"/> 
       </div> 
     </form> 
     </Card> 
    ) 
    } 
}; 

Es produzieren Fehler wie diese in Loginform Seite:

Uncaught ReferenceError: renderTextField is not defined

i do console.log (renderTextField) auch in Mutter/Behälterform, es zeigt:

function renderTextField(props) { return _react3.default.createElement(_reduxFormMaterialUi.TextField, _extends({ hintText: props.label, floatingLabelText: props.label, errorText: props.touc…

Answer 1

Sie vorbei nicht die Funktion korrekt Loginform sollte

renderTextfield={renderTextField}renderTextField={renderTextField}