React在Redux中存储Ref元素

// Redux Action
const storeRefElement = (ref) => {
  return {
    type: 'STORE_REF_ELEMENT',
    payload: ref,
  };
};

// Redux Reducer
const initialState = {
  refElement: null,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'STORE_REF_ELEMENT':
      return {
        ...state,
        refElement: action.payload,
      };
    default:
      return state;
  }
};

// React Component
import React, { useRef } from 'react';
import { connect } from 'react-redux';
import { storeRefElement } from './actions';

const MyComponent = ({ storeRefElement }) => {
  const refElement = useRef(null);

  const handleButtonClick = () => {
    storeRefElement(refElement.current);
  };

  return (
    <div>
      <input type="text" ref={refElement} />
      <button onClick={handleButtonClick}>Store Ref Element</button>
    </div>
  );
};

export default connect(null, { storeRefElement })(MyComponent);