为React中的组件创建一个自定义onChange函数作为参数，该函数接受2个自定义参数

这很难用语言解释，但如果您查看this sandbox中的代码，您可能会理解。我正在尝试创建此滑块组件，并希望该组件的onChange函数能够访问滑块的最小值和最大值。

这样您就可以创建滑块，并访问最小值和最大值，如

<Slider
        min={300}
        max={3000}
        onChange={(nMin, nMax) => {
          setNewMin(nMin);
          setNewMax(nMax);
        }}
      />

这类似于material ui slider的onChange和onChangeComited函数。我想知道我自己怎么才能创造出这样的争论。

---

简而言之，我想知道如何更新codesandbox中的代码，以便可以在App组件中访问newMin和Newmax。当前未实际为nMin和Nmax赋值。

---

解决方案

与任何回调一样，参数由实际调用它的函数确定

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

function foo(callback){
   const a = 1, b = 2, c = {foo:'bar'};
   //you determine what arguments are when calling the callback
   callback(a , b, c);   
}

function myCallback(arg1, arg2, arg3){
   console.log('Arg2 =', arg2)
}

foo(myCallback)

因此可以将组件的onChange道具视为回调。您可以使用组件中的事件侦听器来调用传递给道具的回调

简化示例

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="真">

const Slider = ({value, onChange}) => {
  // handles the change on actual element 
  const handleChange =({target})=>{    
    if(typeof onChange === 'function'){
       // call the callback passing in whatever parameters you decide
       // in this simple case just sending numeric value
       onChange(target.valueAsNumber)
    }    
  }
  return  (<input value={value} type="range" onChange={handleChange} min="1" max="10" />);
};

const App = ()=>{
   const [val, setVal] = React.useState(4);
   // only receives value as documented by the Slider component
   const handleChange = (value) => setVal(value);
   return (
     <div>
      <div>Value in App: {val}</div>
      <Slider value={val} onChange={handleChange}/>
    </div>
   )
}

ReactDOM.render(
  <App />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>