javascript - 如何在div onClick中获取元素的文本内容？ React.js、JavaScript

Question

我想在点击时获取div的文本内容。

我尝试将引用添加到我的语法中，但当我尝试执行 const ref = this.refName.textContent 时，它不起作用。

所以我想要实现的是点击recipe-container，将h3和ul的文本内容存储到变量中，其中变量位于父组件中。

这是我的子组件:

export default class Recipecontainer extends React.Component {
render(){
    const recipe = this.props.recipe;
    let recipeIngredients = recipe.ingredients;
    recipeIngredients = recipeIngredients.map((item, index) => <li key={index}>{item}</li>);
    return (
        <div className="recipe-container">
            <h3 className="recipe-name">{recipe.recipeName}</h3>
            <div className="food-img">
                <img src={recipe.smallImageUrls} alt=""/>
            </div>
            <ul className="ingredient-list">{recipeIngredients}</ul>
        </div>
    )
}

这是我计划使用的方法，在我的父组件中，将这些文本内容保存到变量中；但当然我下面写的不起作用。

saveData(e){
    const recipeName = document.getElementsByClassName(".recipe-name").textContent;
}

感谢任何帮助!

Answer 1

使用innerHTML代替textCOntent

 const recipeName = document.getElementsByClassName(".recipe-name").innerHTML;