如何从独立文件中我自己的反应组件中获取嵌套输入元素的值？

Question

我的“我的 React 组件”如下：

'use client';

import styles from './range-slider.module.css'

// range input = track & thumb

export default function RangeSlider({minState, maxState} : 
    {minState: [string, Function], maxState: [string, Function]}) {
  const [min, setMin] = minState;
  const [max, setMax] = maxState;

  const handleMin = (e: React.ChangeEvent<HTMLInputElement>) => {
    setMin(parseInt(e.target.value) < parseInt(max)? e.target.value : max);
  };

  const handleMax = (e: React.ChangeEvent<HTMLInputElement>) => {
    setMax(parseInt(e.target.value) > parseInt(min)? e.target.value : min);
  };

  return (
    <div>
      <div className={styles.rangeInput}>
        <div className={styles.sliderCtrl}>
          <input 
            type="range" 
            className={`${styles.slider} ${styles.min}`} 
            min="0" 
            max="100"
            value = {min}
            onChange={handleMin}/>
          <input 
            type="range" 
            className={`${styles.slider} ${styles.max}`} 
            min="0" 
            max="100"
            value={max}
            onChange={handleMax}/>
        </div>
        <div className={styles.inputCtrl}>
          <div className="min">
            <input 
              className="val-input" 
              type="number" 
              min="0" 
              max="100"
              value={min}
              onChange={handleMin}/>
          </div>
          <div className="max">
            <input 
              className="val-input" 
              type="number" 
              min="0" 
              max="100"
              value={max}
              onChange={handleMax}/>
          </div>
        </div>
      </div>
    </div>
  )
}

但是，我怀疑将 useState 作为 props 传递给 RangeSlider 可能不是一个好习惯。我的问题 1 是这是否是好的做法以及建议的方法是什么。

事实上，我的主要目的只是从其父组件中获取 RangeSlider 的值（即嵌套在其中的两个范围输入的值），如果有人能告诉我有关它的信息，我将不胜感激，那就是问题2.

Answer 1

使用 useRef 钩子来引用输入元素并获得你想要的。

 import React, { useRef } from 'react';
 import styles from './range-slider.module.css';
    
export default function RangeSlider({ minState, maxState }) {
  const [min, setMin] = minState;
  const [max, setMax] = maxState;
  
  // Create refs for min and max inputs
  const minInputRef = useRef(null);
  const maxInputRef = useRef(null);

  const handleMin = (e) => {
    const value = parseInt(e.target.value);
    setMin(value < parseInt(max) ? value : max);
  };

  const handleMax = (e) => {
    const value = parseInt(e.target.value);
    setMax(value > parseInt(min) ? value : min);
  };

  return (
    <div>
      <div className={styles.rangeInput}>
        <div className={styles.sliderCtrl}>
          <input 
            type="range" 
            className={`${styles.slider} ${styles.min}`} 
            min="0" 
            max="100"
            value={min}
            onChange={handleMin}
            ref={minInputRef} 
          />
          <input 
            type="range" 
            className={`${styles.slider} ${styles.max}`} 
            min="0" 
            max="100"
            value={max}
            onChange={handleMax}
            ref={maxInputRef} 
          />
        </div>
        <div className={styles.inputCtrl}>
          <div className="min">
            <input 
              className="val-input" 
              type="number" 
              min="0" 
              max="100"
              value={min}
              onChange={handleMin}
              ref={minInputRef} 
            />
          </div>
          <div className="max">
            <input 
              className="val-input" 
              type="number" 
              min="0" 
              max="100"
              value={max}
              onChange={handleMax}
              ref={maxInputRef} 
            />
          </div>
        </div>
      </div>
    </div>
  );
}