React开发中如何将父App的方法绑定到导入子组件的对应方法上？

实现方法 #

1. 父组件传递回调函数给子组件 #

在App组件中调用DynamicSubmitForm的位置，将你定义的handleNewTransactionNumber方法作为props传入子组件：

// 原代码：<DynamicSubmitForm />
// 修改为：
<DynamicSubmitForm onSubmit={handleNewTransactionNumber} />

2. 子组件触发父组件传入的回调 #

修改DynamicSubmitForm类组件的handleSubmit方法，在阻止默认事件后调用父组件传入的方法，同时把当前子组件内的输入值传递过去：

handleSubmit(event) {
  event.preventDefault();
  // 调用父组件传入的方法，传入构造的事件对象匹配你现有方法的参数格式
  this.props.onSubmit({
    target: {
      value: this.state.value
    }
  });
  // 可选：提交后清空输入框
  this.setState({ value: '' });
}

注意优化点 #

• 你当前App组件内的recentTransactionsCount是普通变量，组件每次重渲染都会重置为0，建议改用useState存储：const [recentTransactionsCount, setRecentTransactionsCount] = useState(0)，修改计数时调用setRecentTransactionsCount更新
• 当前income、expenses是字符串类型，直接相加会出现字符串拼接问题，建议转成数字类型存储和计算

内容的提问来源于stack exchange，提问作者youngprogrammer1997