Javascript 父组件如何在Reactjs中调用其子组件的方法

据我所知，继承允许子对象使用父对象的属性/方法。但在研发过程中，我发现了一个代码段，其中父组件也使用子组件方法。我搜索了一下，但没有找到正确的解释。代码如下：

表单组件：

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;

从“React”导入React；
从“/Input”导入输入；
类形式扩展了React.Component{
状态={
数据：{}，
错误：{}
};
handleChange=（{currentTarget:input}）=>{
const data={…this.state.data}；
数据[input.name]=input.value；
this.setState（{data}）；
};
handleSubmit=（e）=>{
e、 预防默认值（）；
//一些验证
这是doSubmit（）；
};
renderInput（名称、标签、类型）{
const{data，errors}=this.state；
返回(
);
};
渲染按钮（标签）{
返回(
{label}
);
}
}
导出默认表单；

登录组件：

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;

从“React”导入React；
从“/common/Form”导入表单；
类登录扩展表单{
状态={
数据：{
用户名：“”，
密码：“”，
},
错误：{}，
};
doSubmit=（）=>{
console.log（this.state.data）；
};
render（）{
返回(
登录
{this.renderInput（“用户名”、“用户名”、“文本”）}
{this.renderInput（“密码”、“密码”、“密码”）}
{this.renderButton（“提交”）}
);
}
}
导出默认登录；

输入组件：

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;

从“React”导入React；
常量输入=（{name，label，error，…rest}）=>{
返回(
{label}
{error&&{error}
);
};
导出默认输入；

---

在这里，登录组件扩展了表单组件。因此，登录可以使用表单的方法。但是表单如何使用

doSubmit（）

登录方法在其

handleSubmit

方法中

这是因为

登录扩展了表单

，如果您只使用

登录

的实例，您将得到一个具有

表单

和

登录

所有方法的组件。顺便说一句，这在React中是不推荐的（扩展您自己的类），即使是这样，在扩展它的类的超级方法中使用也不是一个好主意。在这里，

Form

是您所称的“抽象类”，而

doSubmit（）

是一个“抽象方法”。由于JavaScript没有真正的抽象类，这只反映在基类没有被直接使用这一事实上。你能提供一些文档，对这一事实进行广泛的解释吗。@PatrickRoberts@Titus是关于React中的继承，因为JavaScript还不支持抽象类，我认为没有任何文档这是因为

Login扩展了表单

，如果您只使用

Login

的实例，您将得到一个具有

Form

和

Login

所有方法的组件。顺便说一句，在React（扩展您自己的类）中不建议这样做，即使它是，在扩展它的类的超级方法中使用也不是一个好主意。在这里，

Form

就是你所说的“抽象类”，而

doSubmit（）

就是一个“抽象方法”。由于JavaScript没有真正的抽象类，这只反映在基类没有被直接使用这一事实上。你能提供一些文档，对这一事实进行广泛的解释吗。@PatrickRoberts@Titus是关于React中的继承，因为JavaScript还不支持抽象类，我认为没有任何文档我相信你。