Question

我在反应应用中使用了material-ui v1，我正在尝试以编程方式在TextField上调用.focus()。使用TextField上的ref属性会返回null，那么在需要时我如何引用TextField来调用.focus()？

Answer 1

更新 2017-09-25 ：在新的解决方案中，我摆脱了ReactDOM ......这样更优雅。

这是我以编程方式将焦点设置在材料-ui TextField（v1-beta16）上的方式。

import React from 'react';

class MyComponent extends React.Component {
  // you could have similar logic in 'componentDidMount'
  componentWillReceiveProps(newProps) {
    if (..someCondition...) {
      // this is were the focus happens
      this.labelField.focus();    

    }
  }
  render() {
    ...
    <TextField inputRef={field => this.textField = field} .../>
  }
}

我之前的解决方案 - 请勿使用：

这是我以编程方式将焦点设置在材质-ui TextField上的方式。

import React from 'react';
import ReactDOM from 'react-dom';

class MyComponent extends React.Component {
  // you could have similar logic in 'componentDidMount'
  componentWillReceiveProps(newProps) {
    if (..someCondition...) {
      // this is were the focus happens
      ReactDOM.findDOMNode(this.labelField).querySelector('input').focus();    

    }
  }
  render() {
    ...
    <TextField ref={field => this.textField = field} .../>
  }
}

请注意，我对此处描述的解决方案不满意，因为它依赖于了解TextField子项（querySelector('input')），但主要是因为它需要导入ReactDOM。

这是否会使组件更难以使用jest进行测试？（还没试过......）
ReactDOM.findDOMNode被Facebook视为"escape hatch [...that is...] discouraged"。

Answer 2

我认为你可以利用refs来达到这个目的。

以下是示例代码

<input 
      ref={(input) => { this.nameInput = input; }} 
      defaultValue="will focus"
/>

现在使用refs你可以按照以下步骤进行操作

this.nameInput.focus();

这可以解决在触发其他事件时将注意力设置在输入框上的问题。

Answer 3

如果您正在使用功能组件，则可以使用react挂钩。

import React, { useState, useRef } from "react";

let MyStatelessComponent = props => {
  let textInput = useRef(null);

  return (
    <div>
      <Button
        onClick={() => {
          setTimeout(() => {
            textInput.current.focus();
          }, 100);
        }}
      >
        Focus TextField
      </Button>
      <Field
        fullWidth
        required
        inputRef={textInput}
        name="firstName"
        type="text"
        placeholder="Enter Your First Name"
        label="First Name"
        component={TextField}
      />
    </div>
  );
};

Answer 4

如果您使用的是无状态功能组件，则可以使用我在这里回答过的react挂钩 @Theo

在text-ui v1中聚焦TextField

4 个答案: