我有一个封装在功能组件中的 React-Bootstrap 表单,我希望提交此表单并让onSubmit
该组件处理其事件。
但是,我无法弄清楚 , 的组合useRef
,createRef
或者forwardRef
用来适当地调用submit
表单上的 :
登录表单.js
const LoginForm = (props) => {
const onSubmit = (e) => {
e.preventDefault()
}
return (
<Form onSubmit={onSubmit} className="form-custom-margin">
//...
</Form>
)
}
export default LoginForm;
MyModal.js
const Modal = (props) => {
// trying to figure out how to establish a ref?
const handleActionClick(e){
// want to call LoginForm and "submit" the form and have `onSubmit` method run
}
return (
<Modal>
<Modal.Body>
<LoginForm />
<Modal.Body>
<Modal.Footer>
<Button variant="primary" onClick={handleActionClick}>Login</Button>
</Modal.Footer>
</Modal>
)
}