Fonction de réaction - n'est pas défini no -def

Votre méthode de rendu est fausse, il ne doit pas contenir la guérison à l'intérieur: Vous appelez HeicortPress code> sur Ceci code> Pour que vous devriez le garder dans la classe.

     class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      progressValue: 0,
    };

    this.handleProgress = this.handleProgress.bind(this);
  }


    handleProgress = () => {
      console.log('hello');
    };


  render() {
    const { questions } = this.props;
    const { progressValue } = this.state;
    const groupByList = groupBy(questions.questions, 'type');
    const objectToArray = Object.entries(groupByList);
    return (
      <>
        <Progress value={progressValue} />
        <div>
          <ul>
            {questionListItem && questionListItem.length > 0 ?
              (
                <Wizard
                  onChange={this.handleProgress}
                  initialValues={{ employed: true }}
                  onSubmit={() => {
                    window.alert('Hello');
                  }}
                >
                  {questionListItem}
                </Wizard>
              ) : null
            }
          </ul>
        </div>
      </>
    );
  }
}

Si vous utilisez un guictProgress à l'intérieur du rendu, vous devez définir cela suit.

handleProgress = () => {
      console.log('hello');
    };

Le guidon ne doit pas être dans la fonction de rendu, veuillez garder des fonctions dans votre composant lui-même, également si vous utilisez la syntaxe ES6 Flèche Fonction, vous n'avez pas besoin de le lier sur votre constructeur.

Veuillez vous reporter au bloc de code ci-dessous. P>

  class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        progressValue: 0,
      };
      // no need to use bind in the constructor while using ES6 arrow function. 
      // this.handleProgress = this.handleProgress.bind(this);
    }
    // move ES6 arrow function here. 
    handleProgress = () => {
      console.log('hello');
    };
    render() {
      const { questions } = this.props;
      const { progressValue } = this.state;
      const groupByList = groupBy(questions.questions, 'type');
      const objectToArray = Object.entries(groupByList);

      return (
        <>
          <Progress value={progressValue} />
          <div>
            <ul>
              {questionListItem && questionListItem.length > 0 ?
                (
                  <Wizard
                    onChange={this.handleProgress}
                    initialValues={{ employed: true }}
                    onSubmit={() => {
                      window.alert('Hello');
                    }}
                  >
                    {questionListItem}
                  </Wizard>
                ) : null
              }
            </ul>
          </div>
        </>
      );
    }
  }

Essayez celui-ci, j'ai vérifié sur réact de la version 16.8.6 forte>

Nous n'avons pas besoin de se lier dans une nouvelle version à l'aide de fonctions de la tête de flèche. Voici la mise en œuvre complète de la méthode de l'argument de liaison et de la méthode de non-argumentation. P>

import React, { Component } from "react";

class Counter extends Component {
  state = {
    count: 0
  };

  constructor() {
    super();
  }

  render() {
    return (
      <div>
        <button onClick={this.updateCounter}>NoArgCounter</button>
        <button onClick={() => this.updateCounterByArg(this.state.count)}>ArgCounter</button>
        <span>{this.state.count}</span>
      </div>
    );
  }

  updateCounter = () => {
    let { count } = this.state;
    this.setState({ count: ++count });
  };

  updateCounterByArg = counter => {
    this.setState({ count: ++counter });
  };
}

export default Counter;