reactjs - Reactjs - 在子组件中调用父方法

问题描述

晚上好。

我开始学习reactj。我尝试制作一个可以包含个性化内容的表单，但我尝试在表单的父类中调用一个方法，在该方法中我尝试更改状态变量，但它显示“无法读取未定义的属性'测试'”。

我的表单类：

class Test extends React.Component {

    constructor (props) {
         super(props)
    }

    tmp(e) {
        this.props.functionTest(e);
    }

    render() {
        return(
            <div className={this.props.DivFormClass}>
                <div className={this.props.TitleClass}>
                    {this.props.Title}
                </div>
                <form className={this.props.FormClass} onSubmit={e => this.tmp(e)}>
                    {this.props.children}
                </form>
            </div>
        )
    }
}

父类：

class Formtest extends React.Component {
    constructor (props) {
        super(props)
        this.state = {
            test :"ok"
        }
    }

    FunctionTest (e) {
        e.preventDefault();
        console.log(this.state.test)
    }

    render() {
        return (
            <div>
                <Test DivFormClass="divtest" TitleClass="titletest" FormClass="test" Title="Test Form" functionTest={this.FunctionTest}>
                    <input name="email" type="email" required="required" className="error"/>
                    <button>OK</button>
                </Test>
            </div>
        )
    }
}

我究竟做错了什么？

标签： reactjs

将此函数转换为箭头函数

FunctionTest  = (e) => {
    e.preventDefault();
    console.log(this.state.test)
}

或使用 bind 语句将 this 的值绑定到类而不是函数本身

reactjs - Reactjs - 在子组件中调用父方法

问题描述

解决方案

推荐阅读