从渲染的类对象访问类函数

Question

我正在构建一个Web应用程序来管理用户的一些输入，我想在其中对在React中呈现的列表中的每个对象执行功能。呈现的对象与其执行的对象是不同的类。

import React, { Component } from "react";
import UserInput  from "./UserInput";

class Layout extends Component {
    objList = []
    state = {
        update: ""
    }

    anotherOne = async () => {
        this.objList.push(<UserInput key={this.objList.length} />);
        this.setState({update: ""});
    }

    submitCase = async () => {
        for (var testCase in this.objList){
            this.objList[0].submitInfo();
        }
    }

    removeLatest = async () => {
        this.list.pop();
        this.setState({update: ""});
    }

    render(){
        return(
            <div id="container">                
                <div>
                    { this.objList }
                </div>
                <div>
                    <button onClick={ this.anotherOne }>Another One</button>
                    <button onClick={ this.submitCase }>Submit</button>
                </div>
            </div>
        );
    }
}

export default Layout;

import React, { Component } from "react";

class UserInput extends Component {
    state = {
        name:       "",
        hairColor:  "",
        age:        "" 
    }

    submitInfo = async () => {
        let path = '/dbmanager';
        let apiName = "myApi"
        let myInit = {
            body: {categoryId: "Person", type: this.state.hairColor, data: JSON.stringify(this.state)},
            contentType: 'application/json',
        }
        await API.post(apiName, path, myInit)
        .then(response => {
            // Add your code here
            console.log(response);
        })
        .catch(error => {
            console.log(error.response);
        })

    }

    handleStateUpdate = (event) => {
        var eName = event.target.name;
        var eValue = event.target.value;
        this.setState({[eName]: eValue});
        console.log(event.target.value, event.target.name);
    }

    render(){
        return(
            <div id="container">                
                <div>
                    <label>Name: </label>
                </div>
                    <textarea 
                    type="text" 
                    id="name"
                    name="name" 
                    value={this.state.name} 
                    onChange={this.handleStateUpdate}/>
                <div>
                    <label>Hair Color: </label>
                </div>
                    <textarea 
                    type="text" 
                    id="hairColor"
                    name="hairColor" 
                    value={this.state.hairColor} 
                    onChange={this.handleStateUpdate}/>

                <div>
                    <label>Age: </label>
                </div>
                    <textarea 
                    type="text" 
                    id="age"
                    name="age" 
                    value={this.state.age} 
                    onChange={this.handleStateUpdate}/>
            </div>
        );
    }
}

export default UserInput;

我希望访问UserInput的类函数，以便可以在同一按钮上提交来自所有它们的数据。相反，这些对象被视为函数，不能以任何方式执行。