Redux-Form，如何将 Ref 与 renderField 一起使用？

Question

我正在尝试将 ref 属性添加到我的 redux 表单字段之一。这是代码：

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

如何将 ref 添加到我的 redux-form 字段中？

Answer 1

您应该创建 class 而不是函数。

import React, { Component } from 'react';

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

Answer 2

错误提示您需要创建有状态组件。您可以通过扩展有关如何转换现有功能组件的文档 React.Component. See this 来做到这一点。

Redux-Form，如何将 Ref 与 renderField 一起使用？

Redux-Form, how to use a Ref with a renderField?

reactjs

redux-form

react-redux

react-redux-form