Javascript ReactJS map onClick获取值

我是新的反应者，我正在创建一个应用程序，它将通过onClick事件获取值，我想我应该这样做：

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;

但是我没有得到值，我做错了什么？

li元素没有值属性。试试这个：

设置数据值属性而不是值。通过dataset.value而不是value检索它。不要试图设置ref，只需使用click事件的target属性来访问li元素

此外，由于@Joshua Slate的建议，本版本还展示了如何将ClickComponent绑定一次，而不是为每个列表项绑定一次

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>
      )
    }
}

---

我想知道为什么您没有将值作为参数传递给函数。 Like:onClick={this.clickComponent.bindthis，item}

解决方案：

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;

---

谢谢@brandon除了此之外，您应该在构造函数中添加一个构造函数并绑定ClickComponent，或者简单地将ClickComponent设置为箭头函数。那么您的onClick将是this.clickcomponent.passingvalue作为函数参数，在这种情况下，我的方法要好得多。@Ved该方法在内存和重新渲染速度方面非常昂贵。您正在为列表中的每个项创建一个新的作用域函数，在重新呈现时，您将重新创建函数并触发事件处理程序的重新绑定。在react中呈现项目数组时，不建议将事件处理程序函数绑定到数组项目。@Brandon您能给我介绍一些关于这方面的文档或基准吗？