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. Посмотрите это из документации о том, как преобразовать существующий функциональный компонент.