如何在React中检查div的属性值

Question

我使用下面的JavaScript代码来获取并记录div的属性值。我想用React重写JavaScript代码。当我尝试在React中执行相同的代码时。我得到错误：e.path.find不是一个函数

功能工作原理：

• 首先，在单击mealsEl，e.path.find之后，将用于遍历meals EL，的所有子元素

• 然后它返回包含类名的子元素：'meat-info'

• 然后，它检查包含类名"mean-info"的子元素是否也具有"data-mail-id"属性。

• 然后记录"数据膳食id"的值

  const mealsEL = document.getElementById('meals')
  mealsEL.addEventListener('click', (e) => {
  const mealInfo = e.path.find((item) => {
  console.log(item)
  if (item.classList) {
  return item.classList.contains('meal-info');
  } else {
  return false;
  }
  });
  console.log(mealInfo)
  if (mealInfo) {
  const mealID = mealInfo.getAttribute('data-mealid');
  getMealByID(mealID);
  }
  });

  <div class="container">
  <div id="result-heading"></div>
  <div id="meals" class="meals">
  
  <div class="meal">
  <img class="meal-img" src="https://source.unsplash.com/random" alt=""  style="width:180px; height: 180px;border: solid #000 4px;"/>
  <div class="meal-info" >
  </div>
  </div>
  </div>
  <div id="single-meal"></div>
  </div>

  <div id="result-heading"></div>
  <div id="meals" class="meals">
  <div class="meal">
  <img class="meal-img" src="https://source.unsplash.com/random" alt=""  style="width:180px; height: 180px;border: solid #000 4px;"/>
  <div class="meal-info" >
  </div>
  </div>
  

  const mealsEL = document.getElementById('meals')
  mealsEL.addEventListener('click', (e) => {
  const mealInfo = e.path.find((item) => {
  if (item.classList) {
  console.log(item.classList)
  return item.classList.contains("meal-info");
  } else {
  return false;
  }
  });
  // console.log(mealInfo)
  if (mealInfo) {
  const mealID = mealInfo.getAttribute('data-mealid');
  // getMealByID(mealID);
  console.log(mealID)
  } else {
  console.log('no')
  }
  });

  <div id="meals" class="meals">
  <div class="meal">
  <img class="meal-img" src="" alt="">
  <div class="meal-info" data-mealid="75757">
  <h3>Click To Show Data Meal Id</h3>
  </div>
  </div>
  <!-- When mealsEL is clicked, the function uses e.path.find to check if the mealsEl children element contain a className of 'meal-info' and stores the result in the variable `const meal-info`
  // The second if statement checks if the child element containing className meal-info has an attribute of 'data-mealid'
  // Then the value of data-mealid attribute from the child element is logged to the console
  </div> -->
  // React Code
  const getMealByID = (e) => {
  const NativePath = e.nativeEvent()
  const mealInfo = NativePath.path.find((item) => {
  console.log(mealInfo)
  if (item.classList) {
  return item.classList.contains('meal-info');
  } else {
  return false;
  }
  });
  if (mealInfo) {
  const mealID = mealInfo.getAttribute('data-mealid');
  getMealByID(mealID);
  }
  }
  
  
  
  <div id="meals" className="meals" onClick={getMealByID}>
  
  {meals &&
  meals.map((meal) => {
  const src = meal.strMealThumb;
  const mealID = meal.idMeal;
  const alt = meal.strMeal;
  const index = meal.idMeal;
  
  // const mealIng = meal.strIngredient1;
  const mealIng = [];
  for (let i = 1; i <= 20; i++) {
  if (meal[`strIngredient${i}`]) {
  
  mealIng.push(
  `${meal[`strIngredient${i}`]} - ${meal[`strMeasure${i}`]}`
  );
  } else {
  break;
  }
  }
  return (
  <div className="meal" key={index}>
  <img className="meal-img" src={src} alt="{alt}" />
  <div className="meal-info" data-mealid={mealID}>
  <h3>{alt}</h3>
  </div>
  <h2>{mealIng}</h2>
  </div>
  );
  })}
  

Answer 1

由于使用无效参数调用getMealByID，因此出现错误，函数需要一个事件作为参数：

if (mealInfo) {
const mealID = mealInfo.getAttribute('data-mealid');
getMealByID(mealID); //--> mealID is not an event
}

此外，我认为你可以使用更少的代码获得mealInfo节点：

const getMealByID = e => {
const node = e.target;
const mealInfo = node.querySelector(".meal-info");
if (mealInfo) {
const mealID = mealInfo.getAttribute("data-mealid");
...
}
};

Answer 2

// In order to get the data-mealid attribute value from a div
//  by using its parent's element . I had to use 
//  e.target.getAttribute("data-mealid") on a click event from the parents element.

function App() {
const getMealInfoAttribute = e => {
const mealIDData = e.target.getAttribute("data-mealid")
console.log(mealID)
};

return (
<div id="meals" className="meals" onClick={getMealInfoAttribute}>
<div className="meal" key={index}>
<img className="meal-img" src={src} alt="{alt}" />
<div className="meal-info" data-mealid={mealID}>
<h3>{alt}</h3>
</div>
</div>
);


</div>)
}