如何使用React Refs将REDUX表格字段聚焦

Question

我正在尝试使用React Refs安装时将REDUX-FORM FIELD聚焦。

当我在componentDidMount中尝试this.refs.title.getRenderedComponent().focus()时，会引发错误说：

edit_fund.js:77 Uncaught TypeError: Cannot read property 'getRenderedComponent' of undefined

当我委托this.refs时，它主要是一个空的对象，有时将"标题"识别为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，使用REFS和字符串有一些问题。请检查文档以获取更多详细信息。

Answer 2

我使用redux-form和材料UI，必须执行以下操作。MaterialCheckboxField和MaterialTextField是我的项目包装material-ui/{Checkbox,TextField}中的自定义组件。

i将MaterialTextField转换为 class组件（如在React Docs中规定）。

您不得在 function 组件上使用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特定
建议从这个问题中使用setTimeout()允许宽限期。考虑@lukas的评论：

"此代码可能会抛出。甚至更好的是将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
/>

注意
我正在使用材料UI 0.x，不确定这是否就是原因 React.CreateRef()对我不起作用（推荐的方法 由于react 16.3）。