React表单中Ref返回null无法聚焦错误字段，求解决方案

问题根源分析 #

• 自定义组件未转发Ref：直接把React.createRef()传给自定义的<FormInput>组件，父组件无法获取到组件内部的原生input DOM节点，导致current为null。
• Render方法结构错误：原代码中render函数存在两个return语句，第一个return的<FormInput>部分永远不会被渲染，自然无法绑定ref。
• 方法执行时机不当：renderSubmitAction中直接调用focus()时，可能组件还未完成挂载，或者errors状态未正确触发更新。

修复步骤 #

1. 修正Render方法结构 #

确保<FormInput>被正确渲染到DOM中，去掉多余的return语句，将表单输入框整合到最终的return结构里：

class Form extends Component {
    constructor(props) {
        super(props);
        this.textInput = React.createRef();
        this.getErrors = this.getErrors.bind(this);
        this.state = { errors: null };
    }

    componentWillUnmount() {
        // 清理逻辑
    }

    handleSubmit = () => {
        // 表单验证逻辑，生成错误信息
        const errors = this.getErrors();
        this.setState({ errors });
    };

    componentDidUpdate(prevState) {
        // 当错误状态更新且存在错误时，执行聚焦
        if (!prevState.errors && this.state.errors && this.textInput.current) {
            this.textInput.current.focus();
        }
    }

    render() {
        const { propertyName, id_prefix } = this.props;
        return (
            <View key={this.state.submitId} style={this.props.style}>
                {/* 渲染表单输入框 */}
                <View key={propertyName}>
                    <FormInput
                        id={id_prefix + propertyName}
                        key={propertyName}
                        ref={this.textInput}
                    />
                </View>
                {this.props.children}
                {/* 渲染提交按钮 */}
                <Button onPress={this.handleSubmit}>提交</Button>
            </View>
        );
    }
}

2. 让自定义组件转发Ref #

修改<FormInput>组件，使用React.forwardRef将ref转发到内部的原生输入元素：

// FormInput.js
const FormInput = React.forwardRef((props, ref) => {
    return (
        <TextInput
            {...props}
            ref={ref} // 将父组件传递的ref绑定到原生TextInput
        />
    );
});

export default FormInput;

3. 用生命周期监听错误状态 #

通过componentDidUpdate监听errors状态变化，确保在DOM更新完成后再执行聚焦操作，避免ref未挂载的问题。

关键注意点 #

• 自定义组件必须通过forwardRef才能让父组件获取到内部DOM节点的ref。
• 禁止在render阶段直接执行DOM操作，应该在组件挂载完成或状态更新后的生命周期方法中处理。
• 调用focus()前必须检查this.textInput.current是否存在，避免触发null调用错误。

内容的提问来源于stack exchange，提问作者Curious_guy