Redux-Form, как использовать Ref с renderField?

Я пытаюсь добавить атрибут ref в одно из моих полей формы-редукса. Вот код:

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>

..... в функции рендера

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

Я получаю следующую ошибку:

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

Как я могу получить ссылку на мое поле в форме избыточной формы?

Спасибо

2 ответа

Решение

Вы должны создать класс вместо функции.

import React, { Component } from 'react';

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

Ошибка говорит вам, что вам нужно создать компонент с состоянием. Вы можете сделать это, расширив React.Component. Посмотрите это из документации о том, как преобразовать существующий функциональный компонент.

Другие вопросы по тегам