时间戳

首页 > 解决方案 > 在 React 的无状态函数组件中选择 React 中的元素？

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

问题描述

<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 中聚焦输入字段？

标签： reactjs

解决方案

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

import * as React from "react";

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

export default TextInput;

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

推荐阅读