javascript - 如何使用 React refs 来聚焦 Redux 表单字段？

Question

我正在尝试使用 React refs 在安装时聚焦 Redux-Form Field。

当我在 componentDidMount 中尝试 this.refs.title.getRenderedComponent().focus() 时，会抛出一条错误消息:

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

当我控制台记录 this.refs 时，它主要是一个空对象，有时将“title”标识为 ref，但它不可靠。

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

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

...

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

Answer 1

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

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

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

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

如果 DOM 输入元素被包裹在另一个元素中:

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

根据 React 文档，使用带有字符串的引用有一些问题。请查看docs了解更多详情。