Создание дочернего класса, в котором ребенок может вызывать свою функцию в родительском классе в React Native - PullRequest
0 голосов
/ 24 сентября 2018

Скажите, что у меня есть следующий код в качестве моего дочернего класса:

export class ChildComponent extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <View style = {styles.horizontalView}>
                {this.props.children}
                <TextInput
                    style={styles.textInput}
                    onChangeText = {() => { 
                        someFunction()
                        //call someFunction() in a parent class
                    }} 
                />
            </View>
        )
    }
}

Теперь в моем родительском классе я хочу иметь возможность сделать что-то вроде:

export class ParentComponent extends React.Component {
    constructor(props) {
        super(props);
    }

    //someFunction is called by the child but is defined here by the parent.
    someFunction() {

    }

    render() {

    }
}

ПустьЯ знаю, если у вас есть решение этой проблемы.Еще раз спасибо.

1 Ответ

0 голосов
/ 24 сентября 2018

Попробуйте это

export class ParentComponent extends React.Component {
    constructor(props) {
        super(props);
    }

    //someFunction is called by the child but is defined here by the parent.
    someFunction() {

    }

    render() {
       <ChildComponent parentFunction={this.someFunction}/>
    }
}

Тогда в childComponent

export class ChildComponent extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <View style = {styles.horizontalView}>
                {this.props.children}
                <TextInput
                    style={styles.textInput}
                    onChangeText = {() => { 
                        //call someFunction() in a parent class
                        this.props.parentFunction();
                    }} 
                />
            </View>
        )
    }
}
...