reactjs - 在 React 的无状态函数组件中选择 React 中的元素？

Question

<TextField
    onChange={props.onChangeTextField}
    ref="questionInput"
    style={styles.textField}
    value={props.existingValue}
    fullWidth={true}
/>

我试图在无状态功能组件中提供一个输入字段，以便在组件加载时能够聚焦它：

componentWillMount = () => {

        this.refs.questionInput.focus();
        console.log('test')

    }
}

但我得到了错误：

Stateless function components cannot have refs.

那么有没有办法在没有 ref 的情况下在 React 中聚焦输入字段？

Answer 1

你应该用forwardRef函数包装你的输入组件。像这样的东西：

import * as React from "react";

const TextInput = React.forwardRef(
  (props, ref) => <input ref={ref} {...props} />
);

export default TextInput;

请注意，它将向您的功能组件添加第二个参数，您应该将其作为ref道具传递给 DOM 元素。

Answer 2

不，您需要将功能组件更改为 class。

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

您还应该使用较新的回调 API 来设置 ref：

ref={ref => { this.questionInput = ref }}

或v16.3 的createRef。

autoFocus如果您只是希望它专注于安装，则将道具添加到输入组件可能会起作用：

<TextField autoFocus ..restOfProps />

Answer 3

是的。但是，您的使用ref方法确实过时了。您应该更新到最新版本的 React（当前16.3.2）并遵循官方文档

function CustomTextInput(props) {
  // textInput must be declared here so the ref can refer to it
  let textInput = React.createRef();

  function handleClick() {
    textInput.current.focus();
  }

  return (
    <div>
      <input
        type="text"
        ref={textInput} />

      <input
        type="button"
        value="Focus the text input"
        onClick={handleClick}
      />
    </div>
  );
}