Ошибка типа: this.props.nextStep не является функцией - PullRequest
Новая
       32

Ошибка типа: this.props.nextStep не является функцией

0 голосов
/ 16 апреля 2020

Здравствуйте, я пытаюсь создать пошаговую форму мастера в React, используя TypeScript и JS, но когда я нажимаю на следующую кнопку (продолжить), я получаю эту ошибку: 

this.props.nextStep is not a function

Мой код имеет 2 разные системы подсчета шагов, одна для шагов в пользовательском интерфейсе (индикатор выполнения) и одна для пролистывания / показа форм, и когда я нажимаю на кнопку, они оба должны произойти. Вот мои компоненты в Sandbox: tsx и js пример 2 страниц формы, мой основной Form Builder, который содержит мои кнопки, Stepper и формы (CreateJob. js) и мой отдельный компонент Stepper пользовательского интерфейса ( Stepper. js): https://codesandbox.io/s/tsx-rj694

в чем проблема?

Редактировать: функция, которая возвращает ошибку (CreateJob. js ) 

continue

и формы с использованием реквизита находятся в Песочнице 

class CreateJob extends Component {
  constructor () {
    super()
    this.state = {
      currentStep: 1
    }
    this.Formstate = {
      Formstep: 1
    }
  }
  Formstate = {
    //Formstep:1,
    Title:'',
    ActivationDate:'',
    ExpirationDate:'',
    DirectManager:'',
    HRBP:'',
    Details:'',
    MinE:'',
    WType:'',
    Address:'',
    Department:'',
    Salary:''
  }

  nextStep =() => {
    const {Formstep} = this.Formstate
    this.setState({
      Formstep: Formstep + 1
    })
  }
  prevStep =() => {
   const {Formstep} = this.Formstate
   this.setState({
     Formstep: Formstep - 1
   })
 }
  handleClick = clickType => {
    const {currentStep} = this.state
    let newStep = currentStep
    clickType === 'next' ? newStep++ : newStep--
    if (newStep > 0 && newStep <= 6) {
      this.setState({
        currentStep: newStep
      });
    }
  }
  handleChange = input => e => {
    this.setState({ [input]: e.target.value });
  };

  continue = e => {
    e.preventDefault();
    this.props.nextStep();
  };

  back = e => {
    e.preventDefault();
    this.props.prevStep();
  };
  render () {
    const stepsArray = [
      'ورود اطلاعات اولیه',
      'توضیحات فرصت شغلی',
      'نیازمندی ها',
      'تایید اطلاعات',
      'ثبت'
    ]
    const { Formstep } = this.Formstate
    const {currentStep} = this.state 
    const {Title,ActivationDate,ExpirationDate,DirectManager,HRBP,Detailss,MinE,WType,Address,Department,Salary } = this.Formstate;
    const values1 ={Title,ActivationDate,ExpirationDate,DirectManager,HRBP}
    const values2={Detailss}
    const values3={MinE,WType,Address,Department,Salary}
    const fullValues ={Title,ActivationDate,ExpirationDate,DirectManager,HRBP,Detailss,MinE,WType,Address,Department,Salary}
    return (
      <div>
        <HRPanel />
        <div>
          <WidgetContainer>
            <Widget padding style={{    fontFamily: 'IranSans',
            textAlign: 'right',
            fontSize: '14px',
            height: '20px',
            boxShadow: '1px 1px 1px 0px #888888',
            backgroundColor: '#f3eaf7'}}>
              <h3 style={{
                position: 'relative',
                bottom: '12px'
              }}
              >
               اضافه کردن فرصت شغلی جدید
              </h3>
            </Widget>
          </WidgetContainer>
        </div>
        <WidgetContainer>
          <Stepper steps={stepsArray} currentStepNumber={currentStep - 1} />
        </WidgetContainer>
        <div>
        {(()=>{
          switch (Formstep) {
            case 1:
              return(
                <MainInfo
                  nextStep={this.nextStep}
                  handleChange={this.handleChange}
                  values1={values1}
                />
              )
            case 2:
              return(
                <Details
                nextStep={this.nextStep}
                prevStep={this.prevStep}
                handleChange={this.handleChange}
                values2={values2}
                />
              )
            case 3:
              return(
                <AdditionalInfo
                nextStep={this.nextStep}
                prevStep={this.prevStep}
                handleChange={this.handleChange}
                values3={values3}
                />
              )
            case 4:
              return(
                <Confirmation
                nextStep={this.nextStep}
                prevStep={this.prevStep}
                fullValues={fullValues}
                />
              )
            case 5:
              return(
                <Accepted/>
              )
          }
        })()}


        </div>    
        <div className='buttons-container'>
           <button onClick={(e) => {this.handleClick(); this.back(e)}} className='previous'>قبلی</button> 
           <button form='my-form' type='submit' onClick={(e) =>{this.handleClick('next'); this.continue(e)}} className='next'>ادامه</button>   
         </div>

      </div>
    )
  }
}

export default CreateJob

1 Ответ

1 голос
/ 16 апреля 2020

this.props.nextStep не является функцией - поскольку ваши реквизиты не имеют такой функции, попробуйте использовать прямой 

this.nextStep();
...