如何使用React REF聚焦Redux表单字段？

Question

我试图使用React参考来聚焦Redux-Form字段，当它安装时。

当我尝试this.refs.title.getRenderedComponent（）。焦点（）在组件的，一个错误抛出说：

edit_fund.js:77未捕获的类型错误：无法读取未定义的属性'getRenderedComponent'

当我安慰的时候。记录这个。refs，它主要是一个空对象，有时将“title”标识为ref，但它不可靠。

我是否错误地使用了refs？下面是我的代码供参考。

componentDidMount = () => {
  this.refs.title
  .getRenderedComponent()
  .focus();
}

...

 <Field
    id="title"
    name="title"
    component={FormInput}
    type="text"
    ref="title" withRef
 />

Answer 1

我使用redux表单和材质UI，必须执行以下操作MaterialCheckboxField和MaterialTextField是我的项目包装中的自定义组件materialui/{Checkbox，TextField}。

我将MaterialTextField转换为类组件（如React文档中所规定）。

不能在函数组件上使用ref属性，因为它们没有实例。

import { findDOMNode } from "react-dom";

字段设置焦点（在render（）方法中）：

<Field
  component={MaterialCheckboxField}
  label="Checkbox"
  name="..."
  onClick={event => {
    if (!event.target.checked) return;
    // focus() field after grace period
    // oddity of Material UI, does not work without
    window.setTimeout(() => this.textField.focus(), 150);
  }}
/>

物料UI特定的
建议使用此SO问题中的setTimeout（）允许宽限期。考虑卢卡斯的评论：

“此代码可能会抛出。更好的方法是将setTimeout（）返回的ID保存到组件，并在componentWillUnmount（）上检查超时是否仍然存在，如果存在则清除它”

将接收焦点的字段（在render（）方法中）：

<Field
  component={MaterialTextField}
  label="Text field"
  name="..."
  ref={ref => {
    const node = findDOMNode(ref);
    if (node) {
      // Material UI wraps input element, 
      // use querySelector() to obtain reference to it
      // if not using MUI, querySelector() likely not needed
      this.textField = node.querySelector("input");
    }
  }}
  withRef
/>

注意
我使用的是材料界面0。x，不确定这是否是反应的原因。CreateRef（）对我不起作用（自React 16.3以来推荐的方法）。

Answer 2

请尝试使用回调函数设置ref：

ref={(input) => { this.title = input; }}

然后使用它来获取底层DOM节点：

ReactDOM.findDOMNode(this.title).focus();

如果DOM输入元素包装在另一个元素中，则为：

ReactDOM.findDOMNode(this.title).getElementsByTagName("input")[0].focus()

根据React，使用带有字符串的引用的文档存在一些问题。请查看文档以了解更多详细信息。