如何在React高阶组件(HOC)中访问被包裹组件的表单元素？

Got it, let's work through how to adjust your HOC to access form elements inside the wrapped component. There are a couple of practical approaches depending on your use case—whether you want the HOC itself to interact with the form elements, or let the parent component of the HOC access them. Let's break them down step by step:

方法1：让HOC转发Ref，允许父组件访问表单元素 #

This approach works best if you need to manipulate form elements from the parent component of your HOC. The core idea is using React.forwardRef to pass a ref through the HOC to the wrapped component, then exposing the form elements from the wrapped component.

First, modify your HOC to support ref forwarding:

import React, { forwardRef } from 'react';

const hoc = (WrappedComponent) => {
  // Use forwardRef to let the HOC receive and pass through a ref
  const HOCWrapper = forwardRef((props, ref) => {
    return (
      <React.Fragment>
        <WrappedComponent {...props} ref={ref} />
      </React.Fragment>
    );
  });

  // Set a display name for better React DevTools debugging
  HOCWrapper.displayName = `HOC(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;

  return HOCWrapper;
};

export { hoc };

类组件版本 #

If your wrapped component is a class component, attach form element refs to the component instance and expose a method to retrieve them:

class UserForm extends React.Component {
  constructor(props) {
    super(props);
    // Create refs for form elements
    this.usernameInput = React.createRef();
    this.passwordInput = React.createRef();
  }

  // Expose a method to let external code access form elements
  getFormElements() {
    return {
      username: this.usernameInput.current,
      password: this.passwordInput.current
    };
  }

  render() {
    return (
      <form>
        <input type="text" ref={this.usernameInput} placeholder="Username" />
        <input type="password" ref={this.passwordInput} placeholder="Password" />
      </form>
    );
  }
}

// Wrap the component with your HOC
const EnhancedUserForm = hoc(UserForm);

函数组件版本 #

For functional components (which don't have instances), use useImperativeHandle to customize what's exposed via the ref:

import React, { useRef, useImperativeHandle, forwardRef } from 'react';

// The functional component also needs forwardRef to receive the ref
const UserForm = forwardRef((props, ref) => {
  const usernameInput = useRef(null);
  const passwordInput = useRef(null);

  // Define what methods/properties the external ref can access
  useImperativeHandle(ref, () => ({
    getFormElements: () => ({
      username: usernameInput.current,
      password: passwordInput.current
    }),
    // Add helper methods if needed, like focusing an input
    focusUsername: () => usernameInput.current?.focus()
  }));

  return (
    <form>
      <input type="text" ref={usernameInput} placeholder="Username" />
      <input type="password" ref={passwordInput} placeholder="Password" />
    </form>
  );
});

const EnhancedUserForm = hoc(UserForm);

Use the enhanced component in a parent #

Now you can access the form elements from the parent component using a ref:

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.formRef = React.createRef();
  }

  componentDidMount() {
    // Access form elements via the ref
    const formElements = this.formRef.current.getFormElements();
    console.log('Username input DOM element:', formElements.username);
    // Call the exposed helper method
    this.formRef.current.focusUsername();
  }

  render() {
    return <EnhancedUserForm ref={this.formRef} />;
  }
}

方法2：HOC directly accesses form elements (no parent involvement) #

If you want the HOC itself to interact with form elements without relying on the parent component, you can pass a registration method to the wrapped component. The wrapped component will use this method to send form element refs to the HOC.

Modify your HOC like this:

import React, { useRef, useEffect } from 'react';

const hoc = (WrappedComponent) => (props) => {
  // Store form element refs inside the HOC
  const formElementRefs = useRef({});

  // Method for the wrapped component to register form elements
  const registerFormElement = (elementKey, elementRef) => {
    formElementRefs.current[elementKey] = elementRef;
  };

  useEffect(() => {
    // After mount, the HOC has full access to registered form elements
    console.log('HOC accessed form elements:', formElementRefs.current);
    
    // Example: Listen for input on the username field
    const usernameInput = formElementRefs.current.username;
    if (usernameInput) {
      const handleInput = (e) => console.log('Username typed:', e.target.value);
      usernameInput.addEventListener('input', handleInput);
      
      // Clean up the event listener to prevent memory leaks
      return () => usernameInput.removeEventListener('input', handleInput);
    }
  }, []);

  return (
    <React.Fragment>
      {/* Pass the registration method to the wrapped component */}
      <WrappedComponent {...props} registerFormElement={registerFormElement} />
    </React.Fragment>
  );
};

export { hoc };

Update the wrapped component to register its form elements:

import React, { useRef, useEffect } from 'react';

const UserForm = ({ registerFormElement }) => {
  const usernameRef = useRef(null);
  const passwordRef = useRef(null);

  useEffect(() => {
    // Register form elements with the HOC
    registerFormElement('username', usernameRef.current);
    registerFormElement('password', passwordRef.current);
  }, [registerFormElement]);

  return (
    <form>
      <input type="text" ref={usernameRef} placeholder="Username" />
      <input type="password" ref={passwordRef} placeholder="Password" />
    </form>
  );
};

const EnhancedUserForm = hoc(UserForm);

Now the HOC will automatically have access to the form elements once the component mounts, and can perform actions like event listening or value reading directly.

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