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

Create a custom onChange function as a parameter for a component in react, which takes 2 custom arguments(为React中的组件创建一个自定义onChange函数作为参数，该函数接受2个自定义参数)

本文介绍了为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>

这篇关于为React中的组件创建一个自定义onChange函数作为参数，该函数接受2个自定义参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！