![函数]( "函数")
本文介绍了为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个自定义参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！