在反应子组件中处理 onSubmit

Question

在子组件上处理 onSubmit 事件的最优雅和类似反应的方式是什么。
目前我有一个包含所有相应字段的父表单组件。当我单击提交时，父组件会处理所有内容并使用数据向服务器发送 POST 请求。
现在的问题是，表单需要做更多的事情，显示引用资源的字段，并在服务器上创建这些引用，类似于父组件。
将其分离为多个提交按钮没有问题，但我想要一个提交按钮，并且我希望在子组件中分离 onSubmit 处理逻辑。所以当我点击提交时，父组件在服务器上创建主要资源，子组件创建它们的东西。
如何以优雅的方式在 react 中实现这一点，因为 react 更适合将数据从父级传递给子级。子组件如何与父组件一起对 onSubmit 事件做出反应？

Answer 1

就这么简单

import React, {Component} from 'react'
import Contact from './contact'
import classes from './Component.css'


class App extends Component{




    componentDidMount() {

    }


    onSubmit = (e) => {
        e.preventDefault()

        alert('submitted')

    }

    render() {
        return(
             <React.Fragment>


<Contact 
   submit={this.onSubmit}

/>

             </React.Fragment>
        )
    }


}



export default App





import React from 'react'


const Contact = props => (
  <React.Fragment>
    <div className={classes.Container}>
      <button onSubmit={props.submit}>Submit</button>
    </div>
  </React.Fragment>
)

export default Contact

如果这不起作用，您可以根据您的用例将函数保存到上下文或 redux。

请随时将您的代码发送给我，我会看看我能做什么 :)