在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 ://codesandbox.io/s/r52xll420m
您可以通过使用常规HTML功能（HTML表单Attribute）来实现此目的，而无需使用React hacks：
class CustomForm extends Component {
render() {
return (
<form id='my-form' onSubmit={alert('Form submitted!')}>
// Form Inputs go here
</form>
);
}
}
<button form='my-form' type="submit">Outside Button</button>
现在，“外部按钮”按钮将完全等同于表单内部。
602392714
清零编程群