ReactJS Karte onClick Wert erhalten

Question

Im neu zu reagieren und im Erstellen einer App, die die Werte mit einem onClick Ereignis holen wird, wie ich dachte, dass ich etwas Liket dies tun würde:

import React, { Component } from 'react'; 

class Ingredients extends Component { 
// Functions 
clickIngredient() { 
let val = this.refs.itemValue.value; 
console.log(val); 
} 
render() { 
    // Print out all ingredients through mapping 
    // First create var from props 
    const ingredients = this.props.data; 
    // Now map through it 
    const ingredientList = ingredients.map((item, i) => { 
    // Return listitem 
    return (
    <li key={i} ref="itemValue" value={item} onClick={this.clickIngredient.bind(this)}>{item}</li> 
); 
}); 
// Final view 
return (
    <div className="ingredients"> 
    <ul className="ingredient-list"> 
     {ingredientList} 
    </ul> 
    </div> 
) 
} 
} 

export default Ingredients; 

Aber ich nicht bekomme den Wert, was mache ich falsch?

Answer 1

li Elemente haben keine value Eigenschaft. Versuchen Sie dies:

Set data-value Attribut anstelle von value. Abrufen über dataset.value anstelle von value. Und anstatt zu versuchen, ref zu setzen, verwenden Sie einfach die target Eigenschaft des Klickereignisses, um zum li Element zu gelangen.

Auch diese Version zeigt, wie clickIngredient einmal statt für jedes Listenelement einmal gebunden werden (Dank @Joshua Slate für den Vorschlag).

class Ingredients extends Component { 
    clickIngredient = (ev) => { 
    let val = ev.target.dataset.value; 
    console.log(val); 
    }; 
    render() { 
    // Print out all ingredients through mapping 
    // First create var from props 
    const ingredients = this.props.data; 
    // Now map through it 
    const ingredientList = ingredients.map((item, i) => { 
    // Return listitem 
    return (
     <li key={i} data-value={item} onClick={this.clickIngredient}>{item}</li> 
    ); 
    }); 
    // Final view 
    return (
     <div className="ingredients"> 
     <ul className="ingredient-list"> 
      {ingredientList} 
     </ul> 
     </div> 
    ) 
    } 
} 

Answer 2

Ich frage mich, warum Sie nicht Wert als Argument übergeben haben zu funktionieren. Like: onClick={this.clickIngredient.bind(this,item)}

Lösung:

import React, { Component } from 'react'; 

class Ingredients extends Component { 
// Functions 
clickIngredient(value) { 
let val = value; 
console.log(val); 
} 
render() { 
    // Print out all ingredients through mapping 
    // First create var from props 
    const ingredients = this.props.data; 
    // Now map through it 
    const ingredientList = ingredients.map((item, i) => { 
    // Return listitem 
    return (
    <li key={i} ref="itemValue" value={item} onClick={this.clickIngredient.bind(this,item)}>{item}</li> 
); 
}); 
// Final view 
return (
    <div className="ingredients"> 
    <ul className="ingredient-list"> 
     {ingredientList} 
    </ul> 
    </div> 
) 
} 
} 

export default Ingredients;