Javascript 使用解盎司响应回调：子组件isn'；t将回调返回到父组件

我想在按下按钮时包括

debounce

功能

我在

ChildComponent

中编写了一个

debounce

函数。它在

ChildComponent

中工作，但在

ParentComponent

中我没有得到回调

家长：

<MyButton onPress={() => alert("My Button clicked")} />

const MyButton = props => {
  const {title = 'Enter', style = {}, textStyle = {}, onPress} = props;
  const delayedOnPress = useCallback(
    debounce(() => {
      console.log(onPress);
      return onPress;
    }, 500),
    [],
  );

  const onPressed = () => {
    return delayedOnPress();
  };

  return (
    <TouchableOpacity onPress={onPressed} style={[styles.button, style]}>
      <Text style={[styles.text, textStyle]}>{title}</Text>
    </TouchableOpacity>
  );
};

alert（“点击我的按钮”）}/>

子项：

<MyButton onPress={() => alert("My Button clicked")} />

const MyButton = props => {
  const {title = 'Enter', style = {}, textStyle = {}, onPress} = props;
  const delayedOnPress = useCallback(
    debounce(() => {
      console.log(onPress);
      return onPress;
    }, 500),
    [],
  );

  const onPressed = () => {
    return delayedOnPress();
  };

  return (
    <TouchableOpacity onPress={onPressed} style={[styles.button, style]}>
      <Text style={[styles.text, textStyle]}>{title}</Text>
    </TouchableOpacity>
  );
};

constmybutton=props=>{
const{title='Enter'，style={}，textStyle={}，onPress}=props；
const delayedOnPress=useCallback(
去盎司（（）=>{
控制台日志（onPress）；
报到；
}, 500),
[],
);
const onPressed=（）=>{
返回delayedOnPress（）；
};
返回(
{title}
);
};

谁能告诉我我做错了什么

谢谢

一些注意事项：

• 在

  useCallback

  中使用箭头函数
• 无需返回

  去盎司

  和处理函数中的任何内容

import React，{useCallback}来自“React”；
导入“/styles.css”；
从“react native”导入{TouchableOpacity，Text}；
从“lodash”导入{debounce}；
常数去盎司作用=去盎司（e=>{
console.log（e）；/“我的按钮已单击”
警报（e）；/“我的按钮已单击”
}, 500);
const MyButton=props=>{
const{onPress}=props；
const delayedOnPress=useCallback（e=>debounceAction（e），[]）；
const onPressed=（）=>{
延迟按下（ON按下）；
};
返回(
按钮
);
};
导出默认函数App（）{
返回(
);
}

---

更新 如果我们希望将来自父级的自定义函数作为道具传递：

const debounceAction = debounce(e => {
  e();       // customized function been passed
}, 500);

...

export default function App() {
  const customizedFunction = () => { // customized function
    alert("test");
  };
  return (
    <div className="App">
      <MyButton onPress={customizedFunction} />  // notice no `()` here
    </div>
  );
}

const debounceAction=debounce（e=>{
e（）；//已传递自定义函数
}, 500);
...
导出默认函数App（）{
const customizedFunction=（）=>{//customized函数
警报（“测试”）；
};
返回(
//注意这里没有“（）”
);
}

---

谢谢。但是我想在

ParentComponent

的道具

onPress

上处理一些操作。在这里，您作为字符串传递。但我在等一个函数。我该怎么做？@droidlerner更新了hanks。因此，在您更新的帖子中，箭头功能已从

ParentComponent

移动到

ChildComponent

，因此在

ParentComponent

上不再需要箭头功能？？您是否有任何文章或资料来了解有关react方法的更多信息？在

@DroidLearner中何时使用（）和何时不使用（）以及何时使用arrow函数非常令人困惑。如果要立即调用函数，请添加

（）

，如果要将其作为道具传递（与字符串相同），则不需要

（）

。官方文件在这些地方非常具体，可能会有所帮助。最后，由于问题已经解决，我们将感谢您的投票和接受。