Question

我有一个用于多步骤页面设置的组件。它存储了

的状态

export default class CreateArticle extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            step: 1
        };
    }
    saveValues(fields) {
        fieldValues = Object.assign({}, fieldValues, fields);
    }
    nextStep() {
        this.setState({
            step : this.state.step +1
        })
    }
    prevStep() {
        this.setState({
            step: this.state.step -1
        })
    }
    render() {

        switch (this.state.step) {
            case 1:
                return <CreateArticleWysiwyg nextStep={this.nextStep} saveValues={this.saveValues}/>
            case 2:
                return <CreateArticlePublish nextStep={this.nextStep} saveValues={this.saveValues}/>
        }
    }
}

我调用props函数的组件之一。

export default class CreateArticleWysiwyg extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            is_header: false,
            is_quote: false
        };
    }
    saveAndContinue = () => {
        var data = {
            article_body: this.refs.article_body.value
        }
        this.props.saveValues(data);
        this.props.nextStep();
    }
    render() {
        return(
            <div>
                <header id="create-article-wysiwyg-header">
                    <button id="cancel">Cancel</button>
                    <button id="confirm" onClick={this.saveAndContinue}>Ok</button>
                    <span class="clear_both"></span>
                </header>
            </div>
        );
    }
}

当我访问该页面时，页面显示其子组件（即<CreateArticleWysiwyg />）。但是当我按下ok（触发saveAndContinue（））时，我收到此错误：

未捕获的TypeError：无法读取未定义的属性“step”

我做错了什么？非常感谢您的帮助。谢谢。

Answer 1

在constructor的{{1}}方法中，您应添加CreateArticle以将函数的上下文绑定到组件而不是单击事件。

无法读取反应状态的属性

1 个答案: