Question

我正在使用redux wizard forms，我有一个名为HEADER的组件，可根据状态页码更改文本。我可以将标题的title属性更改为每个页面，但我想更改字幕属性，以便我可以这样做：

subtitle={this.state.subtitle }

我以为我可以调用一个名为updateComponents（）的函数并执行一个switch语句来查看应该更新哪个字幕，但是下面的代码给了我这个：

ReferenceError: updateComponents is not defined.

我不确定我做错了什么，或者这是更新状态的最佳方法。

import React, { Component, PropTypes } from 'react'
import Step1Page from './step1Page'
import Step2Page from './step2Page'
import Step3Page from './step3Page'
import Header from '../Template/header';

class NewSign extends Component {
  constructor(props) {
    super(props)

    this.nextPage = this.nextPage.bind(this)
    this.previousPage = this.previousPage.bind(this)
    this.updateComponents = this.updateComponents.bind(this)
    this.state = {
      page: 1,
      subtitle:"Basic Info"
    }
  }

  updateComponents(){
    console.log(this.state.page);
  }


  nextPage() {
    this.setState({ page: this.state.page + 1 })
    updateComponents();
  }

  previousPage() {
    this.setState({ page: this.state.page - 1 })
    updateComponents();
  }


  render() {
    const { onSubmit } = this.props
    const { page } = this.state
    return (
        <div className="container">
            <Header 
            title={"Step " + this.state.page } 
            subtitle="Basic Info" />

          {page === 1 && <Step1Page onSubmit={this.nextPage}/>}
          {page === 2 && <Step2Page previousPage={this.previousPage} onSubmit={this.nextPage}/>}
          {page === 3 && <Step3Page previousPage={this.previousPage} onSubmit={this.nextPage}/>}
      </div>

    )
  }
}

NewCampaign.propTypes = {
  onSubmit: PropTypes.func.isRequired
}

export default NewSign

Answer 1

编辑您的代码。您必须使用this语句调用函数。

import React, { Component, PropTypes } from 'react'
import Step1Page from './step1Page'
import Step2Page from './step2Page'
import Step3Page from './step3Page'
import Header from '../Template/header';

class NewSign extends Component {
  constructor(props) {
    super(props)

    this.nextPage = this.nextPage.bind(this)
    this.previousPage = this.previousPage.bind(this)
    this.updateComponents = this.updateComponents.bind(this)
    this.state = {
      page: 1,
      subtitle:"Basic Info"
    }
  }

  updateComponents(){
    console.log(this.state.page);
  }


  nextPage() {
    this.setState({ page: this.state.page + 1 })
    this.updateComponents();
  }

  previousPage() {
    this.setState({ page: this.state.page - 1 })
    this.updateComponents();
  }


  render() {
    const { onSubmit } = this.props
    const { page } = this.state
    return (
        <div className="container">
            <Header 
            title={"Step " + this.state.page } 
            subtitle="Basic Info" />

          {page === 1 && <Step1Page onSubmit={this.nextPage}/>}
          {page === 2 && <Step2Page previousPage={this.previousPage} onSubmit={this.nextPage}/>}
          {page === 3 && <Step3Page previousPage={this.previousPage} onSubmit={this.nextPage}/>}
      </div>

    )
  }
}

NewCampaign.propTypes = {
  onSubmit: PropTypes.func.isRequired
}

export default NewSign

反应未捕获的参考错误

1 个答案: