reactjs - props - ¿Cómo pasar argumentos a funciones en React js?

react map array

Question

1. Quiero mostrar el correo electrónico de la persona en la ventana de alerta. Pero, no sé cómo pasar el correo electrónico como argumentos para mostrar el método de alerta. Además, tampoco me deja usar. Por lo tanto, tengo que asignar los methos displayAlert a una variable y usarla en onClick. No sé por qué no me deja llamarlo directamente.

   class People extends React.Component{
   render (){
           var handleClick = this.displayAlert;
           var items = this.props.items.map(function(item) {
               return(
                   <ul key = {item.id}>
                       <li>
                           <button onClick= {handleClick}>{item.lastName + '', '' + item.firstName}</button>
                       </li>
                   </ul>
               )
           });
           return (<div>{items}</div>);
    }
   
   displayAlert (){
       alert(''Hi'');
   }
   }
   
    class PersonList extends React.Component{
        render () {
           return (
       <div>
           <People items={this.props.people}/> /* People is an array of people*/
       </div>
       );
     }
   }

Answer 1

Usando la función de flecha y el plugin de babel "transform-class-properties"

class People extends React.Component {
  render() {
    return (
      <ul>
        { this.props.items.map( (item) => (
          <li key={item.id}>
            <button onClick={this.displayAlert(item)}>
              {item.lastName + '', '' + item.firstName}
            </button>
          </li>
        ))}
      </ul>
    )
  }

  displayAlert = (item) => (event) => {
    // you can access the item object and the event object
    alert(''Hi'');
  }
}

Answer 2

La forma ES6 :

Usando las funciones de flecha =>

const items = this.props.items.map((item) => (
  <ul key={item.id}>
    <li>
      <button onClick={() => this.displayAlert(item.email)}>
        {item.lastName + '', '' + item.firstName}
      </button>
    </li>
  </ul>
));

onClick se llama a la función anónima y ejecuta this.displayAlert(item.email)

La forma ES5:

Puedes hacer esto usando .bind y pasando el parámetro allí.

También debe pasar this o usar el enlace para mantener el contexto adecuado en su función .map :

var items = this.props.items.map(function(item) {
  return (
    <ul key={item.id}>
      <li>
        <button onClick={this.displayAlert.bind(this, item.email)}>
          {item.lastName + '', '' + item.firstName}
        </button>
      </li>
    </ul>
  );
}, this);

Se muestra en el ejemplo aquí: Reaccionar - Comunicar entre componentes