Доступ к функции класса из представленного объекта класса - PullRequest
Новая
       8

Доступ к функции класса из представленного объекта класса

0 голосов
/ 04 июля 2019

Я создаю веб-приложение для управления некоторыми входными данными от пользователя, где я хочу выполнить функцию для каждого объекта в списке, который отображается в реагировать. Представленные объекты - это другой класс, чем тот, в котором они выполняются. 

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, чтобы я мог отправлять данные из всех них одним нажатием кнопки. Вместо этого объекты считаются функциями и никоим образом не являются исполняемыми.

...