Question

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

我尝试在我的语法中添加ref，但是当我尝试const ref = this.refName.textContent时它不起作用。

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

这是我的孩子组成部分：

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

而不是 textCOntent 使用 innerHTML

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

Answer 2

我认为你不需要html本身，你需要传递 smallImageUrls ＆amp;用户单击div时， smallImageUrls 到父组件，请使用反应方式：

<div className="recipe-container" onClick={() => this.props.onDivClick(recipe.recipeName, recipe.smallImageUrls)}>

Answer 3

您也可以这样做;

<div className="recipe-container" onClick={(e) => console.log(e.target.textContent)}>

Answer 4

您可以向onClick添加props回调，并在子组件中点击<div>时使用该回调和配方数据进行回调。像这样：

export default class Recipecontainer extends React.Component {

  handleClick = () => {
    const { onClick, recipe: { recipeName, recipeIngredients } } = this.props;
    recipeIngredients = recipeIngredients.map((item, index) => ( index, item ));
    onClick({ recipeName, recipeIngredients });
  }
  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" onClick={this.handleClick} >
              <h3 className="recipe-name">{recipe.recipeName}</h3>
              <div className="food-img">
                  <img src={recipe.smallImageUrls} alt=""/>
              </div>
              <ul className="ingredient-list">{recipeIngredients}</ul>
          </div>
      )
  }

如果你绝对需要访问孩子的DOM元素（我真的不认为你这样做），documentation建议将一个附加到DOM的回调道具作为ref属性，如下所示：

function CustomTextInput(props) {
  return (
    <div>
      <input ref={props.inputRef} />
    </div>
  );
}

class Parent extends React.Component {
  render() {
    return (
      <CustomTextInput
        inputRef={el => this.inputElement = el}
      />
    );
  }
}

Answer 5

$('#here').bind('click', function(event) {
  this.toggleModal.bind(this, items.base_image, items.product_name, items.base_price);
});

function toggleModal(image, name, price) {
  console.log(image);
  console.log(name);
  console.log(price);
  const popupimage = image;
  console.log(popupimage);
  this.setState({
    showModal: !this.state.showModal
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div className={styles.product_cart} key={index} id="here"></div>

尝试将所有需要的值传递给函数....

如何在div中获取元素的文本内容？ React.js，JavaScript

5 个答案: