Cómo pasar parámetros durante el procesamiento de eventos en React (explicación detallada)

Resumen

En primer lugar, sabemos que en React, los eventos están vinculados a los elementos a través de pequeños camellos:

  fn = ()=>{
    
    
    //执行代码
  }

  button onClick={
    
    this.fn}>111</button>

Pero si tiene la base de Vue, puede ver claramente la diferencia entre los dos. En Vue, podemos pasar parámetros directamente a fn.
Pero si en React hacemos:

  fn = (value)=>{
    
    
    //执行代码
    console.log(value)
  }

  button onClick={
    
    this.fn('2222')}>111</button>

Notará que 2222 se ha impreso cuando se carga la página. Pero no funciona cuando se hace clic en el botón.

Esto muestra que este método no está vinculado al botón, sino que se llama directamente cuando se carga el botón.
Y este punto también es fácil de entender, React no le hizo esto a Vue, simplemente lo llamó directamente y vinculó el valor de retorno a onClick. Así que aquí tenemos que recordar que cuando se vincula un evento, se debe vincular una función .

Bien, ahora que entiendo el problema, ¿qué debo hacer si quiero pasar parámetros al llamar a un método?

1. Funciones de flecha

El primer método, si vinculamos un evento al botón, la capa externa está vinculada a una función de flecha, y la capa interna es el método que escribimos, que parece ser capaz de resolver el problema a la perfección:

  speak = (value) =>{
    
    
    alert(value)
  }
  
  <button onClick={
    
    () => {
    
    this.speak('qnmlgbd')}}>说话</button>

A través de la función de flecha, el método de habla que definimos está directamente vinculado a onClick y se pasan los parámetros.

2. Función de curry

Luego, si la función de flecha está bien, parece que devolvemos un método directamente en el método y no hay problema.

	  say = (value)=>{
    
    
	    return ()=>{
    
    
	      alert(value)
	    }
	  }
	  
	 <button onClick={
    
    this.say('qnmlgbd')}>说话</button>

De esta manera, cuando vinculamos onClick, no necesitamos escribir funciones de flecha, lo que se ve mejor. Pero el principio es el mismo que el método de ahora.

3. método de enlace

Sabemos que el método de vinculación es cambiar este punto del método y devolver un método. no será llamado directamente.

Bien, si bind tiene esta característica, podemos usarla para resolver este problema.

 loud(value){
    
    
   alert(value)
 }
 
<button onClick={
    
    this.loud.bind(this,'qnmlgbd')}>说话</button>

Cabe señalar aquí que el método fuerte no utiliza el método de función de flecha cuando se define. Los dos métodos anteriores utilizaron el método de función de flecha cuando se definieron.

Esto se debe a que, en React, si define una función sin usar una función de flecha, este dentro de la función será el elemento que vincula el evento, no el componente React . Pero si usa el método de enlace para el enlace de eventos, no necesita considerar este problema.

Finalmente, echemos un vistazo a las diferencias entre estos tres métodos:

export default class Child extends Component {
    
    

  say = (value)=>{
    
    
    return ()=>{
    
    
      alert(value)
    }
  }

  speak = (value) =>{
    
    
    alert(value)
  }

  loud(value){
    
    
    alert(value)
  }

  render() {
    
    
    return (
      <div>
        <button onClick={
    
    this.say('qnmlgbd')}>说话</button>
        <button onClick={
    
    () => {
    
    this.speak('qnmlgbd')}}>说话</button>
        <button onClick={
    
    this.loud.bind(this,'qnmlgbd')}>说话</button>
      </div>
    )
  }
}