0

mi pregunta es como hacer que un evento un click saque un item de un json en concreto, que cada que de un click en un nombre me aparezca el mismo nombre

introducir la descripción de la imagen aquí

si doy click en valor: 1 me mande el mismo nombre en un log y no lo eh podido conseguir introducir la descripción de la imagen aquí

Mi codigo es el siguiente

class App extends Component {

  constructor(props){
    super(props);

    this.state = {
      names: []
    };
    
    axios.get("http://localhost:3001/names")
    .then(response => {
      this.setState({
        names: response.data
      })
    })
    .then(error => {  
      console.log(error);
    })
  }

  handleClick = (name) => {
    console.log('this is:', {name} );
  }

  render() {
    return (
      <div> 
     
        <ul>
        {
          this.state.names.map( name =>
          <li key={name} onClick={this.handleClick}>{name}</li>)
        }
        </ul>
        
    </div>
    );
  }
}

1
  • handleClick = (name) => { console.log('this is:', {name} ); } render() { return ( <div> <ul> { this.state.names.map( name => <li key={name} onClick={this.handleClick.bind(this,name)}>{name}</li>) QUEDA ASI :) el 29 jul. 2018 a las 19:17

1 respuesta 1

1

Primero necesitas atar el evento al componente. Es algo raro, pero acostúmbrate a añadir los eventos así:

<li key={name} onClick={this.handleClick.bind(this)}>{name}</li>

La alternativa a hacer esto es, desde el constructor definir el evento:

constructor(props){
  super(props);

  this.state = {
    names: []
  };

  axios.get("http://localhost:3001/names")
    .then(response => {
      this.setState({
      names: response.data
    })
  })
  .then(error => {  
    console.log(error);
  })

  //Aquí:
  this.handleClick = this.handleClick.bind(this);
}
...
{/* Así puedes dejar el evento como lo tienes tú*/}
<li key={name} onClick={this.handleClick}>{name}</li>

Esto solo asegurará que el evento sea el correcto (la función handleClick recibirá en el parámetro name la información del evento). Para enlazar el dato que quieres debes usar

<li key={name} onClick={this.handleClick.bind(this, name)}>{name}</li>

o

<li key={name} onClick={this.handleClick(name)}>{name}</li>

o usando el operador de flecha:

<li key={name} onClick={(e) => this.handleClick(name, e)}>{name}</li>

dependiendo de dónde prefieras hacer el bind.

Referencia: https://reactjs.org/docs/handling-events.html

2
  • Si de hecho despues vi la ducoumentación y es como lo mencionas, muchas gracias. el 3 ago. 2018 a las 17:34
  • ¿No se supone que las arrow function no utilizan el this? Apenas ando aprendiendo, así que no estoy segura. el 11 nov. 2020 a las 18:28

Tu Respuesta

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

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