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.

那么有没有办法将输入字段聚焦在没有参考的React中？

Answer 1

您应该使用forwardRef函数包装输入组件。像这样：

import * as React from "react";

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

export default TextInput;

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

Answer 2

不，您需要更改functional component into a class。

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

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

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

或createRef for v16.3。

如果你只想把它集中在mount上，那么将autoFocus prop添加到输入组件可能会有所帮助：

<TextField autoFocus ..restOfProps />

Answer 3

是。但是，使用ref的方法确实已经过时了。您应该更新到最新版本的React（目前为16.3.2）并按照official documentation

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>
  );
}

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

3 个答案: