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

Question

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

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

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

这类似于 material ui slider 的 onChange 和 onChangeComitted 函数。我想知道我自己如何创建这样的论点。

总而言之，我想知道如何更新 codesandbox 中的代码，以便可以在 App 组件中访问 newMin 和 newMax。现在 nMin 和 nMax 没有实际赋值。

Answer 1

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

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 属性视为回调。您使用组件中的事件侦听器来调用传递给 props

的回调

简化示例

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>

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

Create a custom onChange function as a parameter for a component in react, which takes 2 custom arguments

javascript

onchange

reactjs