Как родительский компонент вызывает метод своего потомка в Reactjs

Question

Насколько я знаю, наследование позволяет ребенку использовать свойства / методы родителя. Но в то время как R & D, я нашел сегмент кода, где родительский компонент также использует метод дочерних компонентов. Я искал это, но не нашел надлежащего объяснения этому. Вот код:

Компонент формы:

import React from 'react';
import Input from "./input";

class Form extends React.Component{
    state = {
        data: {},
        errors: {}
    };

    handleChange = ({currentTarget: input}) => {
        const data = {...this.state.data};
        data[input.name] = input.value;
        this.setState({data});
    };

    handleSubmit = (e) => {
        e.preventDefault();
        //Some validation
        this.doSubmit();
    };

    renderInput(name, label, type) {
        const {data,errors} = this.state;
        return (
            <Input
                type={type}
                name={name}
                label={label}
                value={data[name]}
                error={errors[name]}
                onChange={this.handleChange}/>
        );
    };

    renderButton(label) {
        return (
            <button>{label}</button>
        );
    }
}

export default Form;

Компонент входа:

import React from 'react';
import Form from "./common/form";

class Login extends Form{
    state = {
        data: {
            username: "",
            password: "",
        },
        errors: {},
    };

    doSubmit = () => {
        console.log(this.state.data);
    };

    render() {
        return (
            <div>
                <h1>Login</h1>
                <form onSubmit={this.handleSubmit}>
                    {this.renderInput("username", "Username", "text")}
                    {this.renderInput("password", "Password", "password")}
                    {this.renderButton("Submit")}
                </form>
            </div>
        );
    }
}

export default Login;

Входной компонент:

import React from 'react';

const Input = ({name, label, error, ...rest}) => {
    return (
        <div className="form-group">
            <label htmlFor={name}>{label}</label>
            <input className="from-control" {...rest} name={name} id={name}/>
            {error && <div>{error}</div>}
        </div>
    );
};

export default Input;

Здесь Логин компонент расширяет Форма Компонент. По этой причине Логин может использовать методы Форма . Но как Форма использует doSubmit() метод Логин в его handleSubmit методе?