0

Estoy trabajando con React y tengo que renderizar una tabla, aquí el código que he trabajado:

render() {
    return (
        <div>
            <button onClick={() => alert(":v")}>:v</button>
            <table id="tUsuarios" className="table">
                <thead>
                    <tr>
                        <th data-sortable="true">ID</th>
                        <th data-sortable="true">Nombre</th>
                        <th data-sortable="true">No. Empleado</th>
                        <th>Correo</th>
                        <th>Puesto</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {
                        this.state.usuarios.map(user =>
                                <tr key={user.User}>
                                    <td>{user.User}</td>
                                    <td>{user.Name}</td>
                                    <td>{user.Empleado}</td>
                                    <td>{user.Mail}</td>
                                    <td>{user.Puesto}</td>
                                    <td>
                                        <a href={"/Usuario?u=" + user.User} title={"Perfil de " + user.Name}><span className="fa fa-user fa-lg"></span></a>
                                        &nbsp;
                                        <a href="#" onClick={() => alert(":v")}><span className="fa fa-edit fa-lg"></span></a>
                                    </td>
                                </tr>)
                        })
                    }
                </tbody>
            </table>
        </div>
    );
}

El problema es que, mientras el button que está hasta arriba sí lanza la alerta, ninguno de los enlaces en this.state.usuarios.map disparan el evento onClick.

Este código es el más sencillo que he intentado (ni siquiera haciendo binding ni nada, pasando una función ahí directamente) y ni siquera así funciona. ¿Alguien tiene idea de qué está pasando?

8
  • debes usar en tu boton el atributo onPress en ves de onClick
    – JDavid
    Commented el 4 ene. 2018 a las 19:18
  • No se si es cosa mia pero, creo, sobran una llave y un parentesis justo debajo del </tr>
    – Ilsanchez
    Commented el 4 ene. 2018 a las 19:48
  • @JDavid no existe el evento onPress, pero ya intenté con MouseDown y nada. Commented el 4 ene. 2018 a las 20:54
  • @KubaHc sí, esto fue que borré el código que intenté con ECMA 5, al final poniendo el .bind(this) que se evita con ECMA 6 (user =>). Commented el 4 ene. 2018 a las 20:56
  • @Kroneaux Schneider claro, que torpe he sido, me he confundido con react-native.
    – JDavid
    Commented el 4 ene. 2018 a las 21:21

1 respuesta 1

0

Esta Información podría servirte para realizar la acción que necesitas.

Por ejemplo podrias intentar:

<button type="button" onClick={this.handleButton}>Realizar</button>

Y el manejador de ese onClick seria:

handleButton(event) {
  event.preventDefault();
  alert("El mensaje que necesitas");
  return;
}

Si necesitas pasar un parametro desde el map que estas haciendo en el array para la información de la tabla debes hacerlo de la siguiente forma:

<button type="button" onClick={(e) => this.handleButton(msm, e)}>Realizar</button>

Donde msm es el parametro que vas a recibir en el manejador.

handleButton(msm, event) {
  event.preventDefault();
  alert("El mensaje es: ${msm}
  return;
}

No te olvides de hacerle bind a la función del manejador en el constructor.

Saludos !

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.