Estoy usando la versión de React anterior a la 16. Por lo tanto, no puedo usar ganchos o redux (cualquier herramienta de terceros) en esta aplicación.

Tengo un padre (componente funcional) que tiene dos componentes secundarios (clase) . Necesito ejecutar el método de envío (evento) de child1 desde un clic de botón dentro de child2 . Por favor, ayúdame con una lógica de trabajo para esto.

Editar: este es el escenario de la vida real: hay un componente funcional principal que tiene 2 componentes secundarios de clase (C1 y C2). Tengo un componente de clase C1 en el lado izquierdo de la pantalla y un componente de clase C2 en el lado derecho. En C1, selecciono algún valor de entrada y hago clic en "enviar" para obtener algunos datos (al llamar a la API) que se mostrarán en C2. Ahora, el requisito es: después de que los datos se cargaron en C2, si cambio algunas entradas en C1 y luego hago clic en un botón "verificar" dentro de C2, el "enviar" de C1 debería activarse con las últimas entradas seleccionadas (es decir, la API en C1 será llamado con las últimas entradas).

A continuación se muestra el esqueleto de una estructura de aplicación simple de la aplicación de la vida real:

padre :

 export default function Parent() { return ( <div> <C1 /> <C2 /> </div> ); }

niño1:

 class C1 extends React.Component{ constructor(props) { super(props); this.state = {} } submitC1(event) { //do something with event.target by invoking from child2 } render() { return ( <div> <form onSubmit={this.submitC1.bind(this)}> <input type="text" /> <button type="submit">Submit</button> </form> </div> ); } }

niño2:

 class C2 extends React.Component{ constructor(props) { super(props); this.state = {} } render() { return ( <div> <button onClick={/*invoke child1 submit method with the event from child1 button itself*/}>Check</button> </div> ); } } export default C2;

Editar: sigo buscando respuestas y no es un duplicado.