Question

我试图将ref属性添加到我的一个redux-form字段中。这是代码：

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

你应该创建类而不是函数。

import React, { Component } from 'react';

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

Answer 2

错误告诉您需要创建有状态组件。您可以通过扩展React.Component来实现此目的。请参阅有关如何转换现有功能组件的文档中的this。

Redux-Form，如何使用ref与renderField？

2 个答案: