Redux-Form, comment utiliser Ref avec un renderField?

Question

Je suis en train d'ajouter un attribut ref à l'un de mes champs Redux-blan .. Voici le code:

let renderField = ({input, label, placeholder, type, meta: {submitFailed, touched, error, pristine}}) => 

    <div className={classNames("form-group", { 
    "has-danger": (submitFailed && error) || (!pristine && touched && error), 
    "has-success": !pristine && touched && !error 
    })}> 
    <textarea {...input} type={type} placeholder={placeholder} className={touched ? (error ? "form-control form-control-danger" : "form-control form-control-success") : "form-control"} /> 
    </div> 

..... dans le rendu func

 <Field 
     name="message" 
     type="textarea" 
     component={renderField} 
     placeholder="Enter your message..." 
     validate={[required]} 
     ref="message" 
     withRef={true} 
     /> 

I » m obtenir l'erreur suivante:

Warning: Stateless function components cannot be given refs (See ref "renderedComponent" in renderField created by ConnectedField). Attempts to access this ref will fail 

Comment puis-je obtenir une référence ajoutée à mon champ de formulaire redux?

Merci

Answer 1

Vous devez créer une classe au lieu de la fonction.

import React, { Component } from 'react'; 

export default class RenderField extends Component { 
    render() {...} 
} 

Answer 2

L'erreur vous indique que vous devez créer un composant avec état. Vous pouvez le faire en prolongeant React.Component. Voir this des documents sur la façon de convertir un composant fonctionnel existant.