javascript - react - redux js

¿Por qué se llama a mi onClick en el render?-React.js

Question

Tengo un componente que he creado:

class Create extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    var playlistDOM = this.renderPlaylists(this.props.playlists);
    return (
      <div>
        {playlistDOM}
      </div>
    )
  }

  activatePlaylist(playlistId) {
    debugger;
  }

  renderPlaylists(playlists) {
    return playlists.map(playlist => {
      return <div key={playlist.playlist_id} onClick={this.activatePlaylist(playlist.playlist_id)}>{playlist.playlist_name}</div>
    });
  }
}

function mapStateToProps(state) {
  return {
    playlists: state.playlists
  }
}

export default connect(mapStateToProps)(Create);

Cuando render esta página, se llama a enablePlaylist para cada playlist de playlist en mi map . Si me bind activatePlaylist bind como:

activatePlaylist.bind(this, playlist.playlist_id)

También puedo usar una función anónima:

onClick={() => this.activatePlaylist(playlist.playlist_id)}

entonces funciona como se esperaba. ¿Por qué pasó esto?

Answer 1

Este comportamiento se documentó cuando React anunció el lanzamiento de componentes basados ​​en clases.

https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html

Encuadernación automática

React.createClass tiene una función mágica incorporada que vincula todos los métodos a esto automáticamente para usted. Esto puede ser un poco confuso para los desarrolladores de JavaScript que no están acostumbrados a esta característica en otras clases, o puede ser confuso cuando se mueven de Reaccionar a otras clases.

Por lo tanto, decidimos no tener esto integrado en el modelo de clase de React. Aún puede explícitamente preenlazar métodos en su constructor si lo desea.

Answer 2

La forma en que pasa el método "this.activatePlaylist (playlist.playlist_id)", llamará al método inmediatamente. Debe pasar la referencia del método al evento onClick. Siga una de las implementaciones mencionadas a continuación para resolver su problema.

1. onClick = {this.activatePlaylist.bind (this, playlist.playlist_id)}

Aquí, la propiedad de vinculación se utiliza para crear una referencia del método ''this.activatePlaylist'' pasando el contexto ''this'' y el argumento ''playlist.playlist_id''

2. onClick = {(event) => {this.activatePlaylist. (playlist.playlist_id)}} Esto adjuntará una función al evento onClick que se activará solo con la acción de clic del usuario. Cuando este código ejecute, se llamará al método ''this.activatePlaylist''.

Answer 3

Sé que esta publicación ya tiene algunos años, pero solo para hacer referencia al último tutorial / documentación de React sobre este error común (también lo hice) de https://reactjs.org/tutorial/tutorial.html :

Nota

Para guardar la escritura y evitar el comportamiento confuso de esto, utilizaremos la sintaxis de la función de flecha para los controladores de eventos aquí y más abajo:

class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => alert(''click'')}>
       {this.props.value}
     </button>
   );
 }
}

Observe cómo con onClick = {() => alert (''click'')}, estamos pasando una función como el accesorio onClick. React solo llamará a esta función después de un clic. Olvidar () => y escribir onClick = {alert (''click'')} es un error común, y dispararía la alerta cada vez que el componente se vuelva a representar.

Answer 4

onClick pasar a la referencia de onClick para la función, cuando haga esto, activatePlaylist( .. ) llame a function y pase al valor de onClick que regresó de activatePlaylist . Puede usar una de estas tres opciones:

1) usando .bind

activatePlaylist.bind(this, playlist.playlist_id)

2) usando la función de flecha

onClick={ () => this.activatePlaylist(playlist.playlist_id) }

3) o la función de retorno de activatePlaylist

activatePlaylist(playlistId) {
  return function () {
     // you code 
  }
}