J'ai un composant contenant une fonction de base onclick.
La fonction est appelée lorsque le composant est rendu (sans clic), pourquoi est-ce que cela se produit? p>
import React, { Component } from "react";
class Some extends Component {
constructor(props) {
super(props);
}
someFunc = (message) => {
console.log(message)
}
render() {
return (
<p onClick={this.someFunc('hello')}>test</p>
)
}
}
4 Réponses :
Vous n'avez pas à ajouter votre fonction comme ça. Il vous suffit de l'appeler d'une autre manière: à l'aide de cette syntaxe, vous pouvez l'appeler par mais votre première solution C'était juste passer la fonction p> si votre fonction n'avait aucun paramètres code>. P> argument code> pour passer, vous pouvez simplement passer la fonction comme ci-dessous: p> <p onClick={this.someFunc}>test</p>
Le plaisir était pour moi
Dans réagir, vous devez passer des fonctions inticulées, donc
onClick = {() => this.someFunction('argument')}
La raison est parce que vous écrivez
Test
au lieu de
Test .
Si vous placez là le Essayez cette flèche de la flèche
this.somefunc ('hello')}> Test
non testé, mais devrait fonctionner correctement de cette façon. () La fonction sera appelée à droite sur le rendu, sinon seulement si vous cliquez sur.
TL; DR: Vous invoquez cela.Somefunc ('Hello') lorsque vous rendant votre classe, pas lorsque vous appelez votre propriété OnClick. Pour résoudre ce problème, vous devez utiliser une fonction de flèche, comme ça: MAINTENANT Si vous voulez savoir pourquoi cela se produit, permettez-moi de clarifier ce que vous faites. P> import React, { Component } from "react";
class Some extends Component {
constructor(props) {
super(props);
}
// You define a class method that when called will in turn call the
// console.log method, passing message as your argument.
// message will equal 'hello' in your example.
someFunc = (message) => {
console.log(message)
}
// You define a render method of your class, react will
// automatically call this method on render.
render() {
// Your render method (which again is called automatically) will return
// <p onClick={this.someFunc('hello')}>test</p>
// let's see what operations you are performing in this JSX return.
return (
// You first define a paragraph html element to be rendered.
// You then give your element an attribute called onClick.
// But oh no! You are assigning onClick with the value of:
// this.someFunc('hello')
//
// That is not good, as what you are in effect saying is:
// please call the method this.someFunc and pass a single argument: 'hello'
// then assign the return of that method call to my property named onClick.
// Therefore, every time you render this class, you are asking
// javascript to call this function and get its value (which is undefined).
// So while you think onClick is a function, it is not! it is only a value.
// A value which you are asking JavaScript to get for you on each render.
// This is because in JS, when you write functionName(),
// you are literally calling the function at that moment.
// See https://www.w3schools.com/js/js_function_invocation.asp
<p onClick={this.someFunc('hello')}>test</p>
// What you want to do instead is assign your onClick property
// a function! Not a value!
// You want to write, "When I click here, do: this.someFunc('hello')"
// to do that, you have some options, but the end goal will be the same
// What you need to do is assign onClick a value, which when called (onClick)
// will trigger your function! For instance:
// onClick={() => this.someFunc('hello')}
// Above we say "on each render, assign the onClick property a value which IS a function!"
// This is, an unnamed arrow function!
// See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
// Notice how we have defined an unnamed function that wraps our
// this.someFunc('hello') and we have NOT
// immediately called it (no parentheses following the wrapper function)
// # outer function \() => #inner function \functionName()\ \ <-- No trailing parentheses.
// Therefore, now the only way to execute your method named
// this.someFunc('hello') is by calling its wrapper function.
// And the only way to call that unnamed wrapper function?
// By invoking your onClick property of your p element.
)
}
}