javascript - 子组件调用父组件函数

Question

我有两个组件，我将 parent 组件作为子组件的 Prop ，并且我想在子组件中调用 parent 函数。

父组件:

import React, {Component} from 'react';
import "../../css/App.css"
import "../../css/Admin.css"
import { connect } from 'react-redux'
import {withRouter} from 'react-router-dom'
import Switch from '@material-ui/core/Switch';
import AuthentificationService from "../../api/AuthentificationService"
import SimplePopover from "./AddUser"
import Users from "./Users"
import Cookies from 'universal-cookie';
import ModalAdd from "../Modal/ModalAdd";

const cookies = new Cookies();

class Admin extends Component {
    constructor() {
        super();

        this.state = {
            response: [{admin: false, createdAt: "", email: "", form_filled: false, id: "", updateAt: "", username: "", verified: false}],
            addUserWorks: false
        };

        this.changeRoute = this.changeRoute.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.setCookie = this.setCookie.bind(this);
        this.setDefaultUserWorks = this.setDefaultUserWorks.bind(this);
        this.setUserWorks = this.setUserWorks.bind(this);
    }

    setDefaultUserWorks(e) {
        console.log("setDefaultUserWorks")
        this.setState({
            addUserWorks: false
        });
    }

    setUserWorks(e) {
        console.log("setUserWorks")

    }

    setCookie(e) {
        cookies.set('access_token', this.props.access_token);
        console.log(cookies.get('access_token'));
    }

    /// Change route
    changeRoute(e) {
        this.props.history.push(e)
    }

    handleChange(e) {

    };

    /// Submit the forms
    async handleSubmit() {
        try {
            await AuthentificationService.getAllUsers({

            })  .then((data) => {
                console.log(data);
                this.setState({
                    response: data
                });
            })
        } catch (error) {
            alert("NO")
        }
    }

    render() {

        this.setCookie();
        var i = 0;
        const nameList = this.state.response.map(name => {
            return (
                <ul>
                    <li className="test">{this.state.response[i].email} </li>
                    <li className="test" >
                        <Switch
                        checked={this.state.response[i].admin}
                        value="checkedVerified"
                        inputProps={{ 'aria-label': 'secondary checkbox' }}
                        />
                    </li>
                    <li className="test" >
                        <Switch
                            checked={this.state.response[i].verified}
                            value="checkedVerified"
                            inputProps={{ 'aria-label': 'secondary checkbox' }}
                        />
                    </li>
                    <li className="test" >
                        <Switch
                            checked={this.state.response[i++].form_filled}
                            value="checkedVerified"
                            inputProps={{ 'aria-label': 'secondary checkbox' }}
                        />
                    </li>
                </ul>
            )
        })

        return (
            <div>
                <div>
                    {this.state.addUserWorks === false ?  "" : <ModalAdd parentMethod={this.setDefaultUserWorks} title="Ajout d'un utilisatuer" message="Vous alvez ajouté un utilisateur"/>}
                </div>
                <button className="button"  onClick={() => {
                    this.handleSubmit();
                }}>
                    Get/refresh the users list
                </button>
                <Users response={this.state.response}/>
                <SimplePopover response={this}/>
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        access_token: state.access_token,
        refresh_token: state.refresh_token,
        user_id: state.user_id,
        username: state.username,
        email: state.email,
        admin: state.admin,
    }
}

export default withRouter(connect(mapStateToProps)(Admin))

我的子组件是 SimplePopover。所以我把我的组件作为 Prop 。 我的子组件接收类作为 props 那么为什么我不能调用像 this.props.nameOfFunction(); 这样的函数

编辑:我有这个错误:props.setUserWorks 不是函数

Answer 1

目前您没有将任何函数属性传递给 <SimplePopover /> :

<SimplePopover response={this}/>

假设想要通过 changeRoute :

 /// Change route
    changeRoute(e) {
        this.props.history.push(e)
    }

像这样修改SimplePopover:

<SimplePopover response={this} changeRoute={this.changeRoute}/>

然后将其绑定(bind)到组件本身并通过访问 prop 来使用它:

<button onClick={(event)=>{props.changeRoute(event)}}

例如。