Question

页面上有多个div。我想要做的是在单击div时获取属性。在jquery中非常容易，但我使用的是Reactjs。这是我的代码。它工作，但每次当我点击最后一个元素的div属性时返回。以下是我的代码和codepen URL。 https://codepen.io/anon/pen/gepVNP?editors=0010

class Content extends React.Component{
  constructor(props) {
    super(props)
    this.click = this.click.bind(this)
  }
  click(){
    // this.prop.setActiveMenu();
    var summary = this.refs.summary;
    console.log(summary.getAttribute('data-slug'))
  }
    render(){
        return(
          <div className="content">
            {posts.map((post)=>{
                return (
                    <div ref="summary" data-slug={post.slug} onClick={this.click} key={post.slug}>
                        <h1>{post.title}</h1>
                        <div>{post.content}</div>
                        <br/><br/><br/><br/><br/>
                    </div>
                );
            })}
          </div>
        );
    }
}

Answer 1

那是因为每次迭代posts数组时你都在改变map中的ref元素。这里不需要参考IMO。

为什么不使用click事件中的event.target？

onClick(event){
   console.log(event.target.getAttribute('data-slug'))
}

顺便说一句：字符串引用被认为是遗留的。看看这里： Why ref='string' is "legacy"?

Answer 2

我不鼓励你使用这种方法，你可以改用组件。

ref prop接受一个函数并返回ref，因此传递一个字符串是行不通的。

class Content extends React.Component{
  constructor(props) {
    super(props)
    this.click = this.click.bind(this)
  }
  click(){
    console.log(this.summary.getAttribute('data-slug'))
  }

    render(){
        return(
          <div className="content">
            {posts.map((post)=>{
                return (
                    <div ref={ref => this.summary = ref} data-slug={post.slug} onClick={this.click} key={post.slug}>
                        <h1>{post.title}</h1>
                        <div>{post.content}</div>
                        <br/><br/><br/><br/><br/>
                    </div>
                );
            })}
          </div>
        );
    }
}

将单击绑定到div并在React中获取属性数据

2 个答案: