反应：警告：无法为函数组件提供参考。 尝试访问此引用将失败。 你的意思是使用 React.forwardRef() 吗？

Question

I'm having an issue in which the three useRefs() ( minValRef , maxValRef , range ) at the top of my code are causing this error.

I've looked at all the available solution, but none I think pertain to me.

I've tried wrapping the function in a forwardRef() , but that seems to only work if the ref is being prop'ed in.

My codepen is below, if that helps. Can anyone give me an idea as to why it's refusing to allow these three useRefs() ?

import React, { useState, useRef, useCallback, useEffect, forwardRef } from 'react';
import Input from './RangeInputCompound';
import './RangeInputClassStyles.css';
let classnames = require('classnames');

function RangeInputComponent({ min, max }) {
  const [sliderValueDisplay, setSliderValueDisplay] = useState({
    leftSliderValue: false,
    rightSliderValue: false,
  });

  const [minVal, setMinVal] = useState(min);
  const [maxVal, setMaxVal] = useState(max);
  const minValRef = useRef(null);
  const maxValRef = useRef(null);
  const range = useRef(null);

  // create a percentage from the value
  const getPercent = useCallback(
    (value) => {
      Math.round(((value - min) / (max - min)) * 100);
    },
    [min, max]
  );

  // Set width of the range to decrease from the left side
  useEffect(() => {
    if (maxValRef.current) {
      const minPercent = getPercent(minVal);
      const maxPercent = getPercent(+maxValRef.current.value);

      if (range.current) {
        range.current.style.left = `${minPercent}%`;
        range.current.style.width = `${maxPercent - minPercent}%`;
      }
    }
  }, [minVal, getPercent]);

  // Set width of the range to decrease from the right side
  useEffect(() => {
    if (minValRef.current) {
      const minPercent = getPercent(+minValRef.current.value);
      const maxPercent = getPercent(maxVal);

      if (range.current) {
        range.current.style.width = `${maxPercent - minPercent}%`;
      }
    }
  }, [maxVal, getPercent]);

  // useEffect(() => {
  //   onChange({ min: minVal, max: maxVal });
  // }, [minVal, maxVal, onChange]);

  function displaySliderValue(e) {
    if (e.type === 'mousedown') {
      setSliderValueDisplay({
        ...sliderValueDisplay,
        [e.target.id]: true,
      });
    } else {
      setSliderValueDisplay({
        ...sliderValueDisplay,
        [e.target.id]: false,
      });
    }
  }

  return (
    <Input>
      <Input.Label>Revenue</Input.Label>
      <Input.RangeField
        type="range"
        name="revenue"
        id="leftSliderValue"
        min={min}
        max={max}
        step="5"
        value={minVal}
        ref={minValRef}
        onChange={(e) => {
          const value = Math.min(+e.target.value, maxVal - 1);
          setMinVal(value);
          e.target.value = value.toString();
        }}
        onMouseDown={displaySliderValue}
        onMouseUp={displaySliderValue}
        className={classnames('thumb thumb--zindex-3', { 'thumb--zindex-5': minVal > max - 100 })}
      ></Input.RangeField>
      <Input.RangeField
        type="range"
        name="revenue"
        id="rightSliderValue"
        min={min}
        max={max}
        step="5"
        value={maxVal}
        ref={maxValRef}
        onChange={(e) => {
          const value = Math.max(+e.target.value, minVal + 1);
          setMaxVal(value);
          e.target.value = value.toString();
        }}
        onMouseDown={displaySliderValue}
        onMouseUp={displaySliderValue}
        className="thumb thumb--zindex-4"
      />
      <Input.Slider className="slider">
        <Input.SliderTrack className="slider__track" />
        <Input.SliderRange ref={range} className="slider__range" />
        {sliderValueDisplay.leftSliderValue && (
          <Input.SliderValue value={minVal} className="slider__left-value">
            {minVal}
          </Input.SliderValue>
        )}
        {sliderValueDisplay.rightSliderValue && (
          <Input.SliderValue value={maxVal} className="slider__right-value">
            {maxVal}
          </Input.SliderValue>
        )}
      </Input.Slider>
      <Input.LimitValueContainer>
        <Input.LimitValue>min $10k</Input.LimitValue>
        <Input.LimitValue>max $200k</Input.LimitValue>
      </Input.LimitValueContainer>
    </Input>
  );
}

export default RangeInputComponent;

https://codepen.io/cjmaret/pen/XWaPrBd

Answer 1

The answer is that "ref" in this case is referring to the styled component, not the DOM node. I needed to use 'innerRef'. Thanks Colin!