web-dev-qa-db-fra.com

Les accessoires JSX ne doivent pas utiliser .bind ()

Comment corriger cette erreur quand j'ai la liaison de cette façon: liaison précédente dans le constructeur résolue mais ceci est complexe pour moi

    {this.onClick.bind(this, 'someString')}>
and
     <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
reactjsreact-jsxjsxfunction-binding
11
monkeyjs

Option 1:

Utilisez arrow functions (avec babel-plugins) PS: - Fonctionnalité expérimentale

class MyComponent extends Component {
   handleClick = (args) => () => {
      // access args here;
      // handle the click event
   }

   render() {
     return (
       <div onClick={this.handleClick(args)}>
         .....
       </div>
     )
   }
 }

Option 2: non recommandé

Définir les fonctions de flèche dans le rendu

   class MyComponent extends Component {
       render() {
         const handleClick = () => {
          // handle the click event
         }
         return (
           <div onClick={handleClick}>
             .....
           </div>
         )
       }
     }

Option 3:

Utiliser la liaison dans le constructeur

   class MyComponent extends Component {
       constructor() {
         super();
         this.handleClick = this.handleClick.bind(this);
       }

       handleClick() {
          // handle click
       }

       render() {

         return (
           <div onClick={this.handleClick}>
             .....
           </div>
         )
       }
     }
23
anoop

Je vous recommande d'utiliser la liaison dans le constructeur de la classe. Cela évitera la répétition en ligne (et la confusion) et n'exécutera la "liaison" qu'une seule fois (lorsque le composant est lancé).

Voici un exemple de la façon dont vous pouvez obtenir un fichier JSX plus propre dans votre scénario d'utilisation:

class YourComponent extends React.Component {
    constructor(props) {
        super(props);

        // Bind functions
        this.handleClick = this.handleClick.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleClick() {
        this.onClick('someString');
    }
    onClick(param) {
        // That's your 'onClick' function
        // param = 'someString'
    }

    handleSubmit() {
        // Same here.
        this.handleFormSubmit();
    }
    handleFormSubmit() {
        // That's your 'handleFormSubmit' function
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <p>...</p>
                <button onClick={this.handleClick} type="button">Cancel</button>
                <button type="submit">Go!</button>
            </form>
        );
    }
}
4
Kaloyan Kosev

Même si toutes les réponses précédentes peuvent atteindre le résultat souhaité, mais je pense que l'extrait ci-dessous mérite d'être mentionné.

class myComponent extends PureComponent {

  handleOnclickWithArgs = arg => {...};

  handleOnclickWithoutArgs = () => {...};

  render() {
    const submitArg = () => this.handleOnclickWithArgs(arg);
    const btnProps = { onClick: submitArg }; // or onClick={submitArg} will do

    return (
      <Fragment>
        <button {...btnProps}>button with argument</button>
        <button onClick={this.handleOnclickWithoutArgs}>
          button without argument
        </button>
     </Fragment>
   );
  }
}

0
Vincent Louis