在React中,数据流向下,动作流向上。因此,通知子组件有关父组件中按钮单击的信息。
这就是您可以执行的操作。
import React, { Component } from "react";import ReactDOM from "react-dom";class CustomForm extends Component { handleonSubmit = e => { e.preventDefault(); // pass form data // get it from state const formData = {}; this.finallySubmit(formData); }; finallySubmit = formData => { alert("Form submitted!"); }; componentDidUpdate(prevProps, prevState) { if (this.props.submitFromOutside) { // pass form data // get it from state const formData = {}; this.finallySubmit(); } } render() { return ( <form onSubmit={this.handleOnSubmit}> <button type="submit">Inside Custom</button> </form> ); }}class App extends Component { constructor(props) { super(props); this.state = { submitFromOutside: false }; } submitCustomForm = () => { this.setState({ submitFromOutside: true }); }; componentDidMount() { console.log(this.form); } render() { return ( <div> <CustomForm submitFromOutside={this.state.submitFromOutside} /> <button onClick={this.submitCustomForm}>In Root</button> </div> ); }}const rootElement = document.getElementById("root");ReactDOM.render(<App />, rootElement);对我而言,此解决方案是很棘手的,不是以一种反应的方式,而是可以满足您的用例。
在此处找到有效的解决方案:https :
//presandbox.io/s/r52xll420m



