Question

我想在单击子按钮时获取父div的键属性。使用我编写的代码，我在控制台中得到的是null。不明白为什么？

我尝试了

let a = e.target.parentElement.getAttribute("key");

但这在控制台中使我为空。

deletepost(e) {
let a = e.target.parentElement.getAttribute("key");  
  console.log(a);
}

render() {
        return (
          <div>
          { this.props.posts.map((post, i) =>
            <div id="a" key="1">
            <span> <h3>{post.title}</h3><p>{post.post}</p></span>
            <input type="button" value="Delete" id="1" onClick={this.deletepost}/>
            </div>
          ) 
        }        
        </div>
        )
    }    
}

我期望为“ 1”，但会为空。预先感谢。

Answer 1

您可以将'key'属性更改为'data-key'并获取以下属性：

// Example class component
class Test extends React.Component {
constructor(props){
super(props);
this.deletepost = this.deletepost.bind(this);
}
deletepost(e) {
let a = e.currentTarget.parentNode.getAttribute("data-key");  
  console.log(a);
}

render() {
        return (
          <div>
          { this.props.posts.map((post, i) =>
            <div id="a" data-key={post.key}>
            <span> <h3>{post.title}</h3><p>{post.post}</p></span>
            <input type="button" value="Delete" id={i} onClick={this.deletepost}/>
            </div>
          ) 
        }        
        </div>
        )
    }    
}

// Render it
ReactDOM.render(
  <Test posts={[{post:'a',key:1},{post:'b',key:2}]} />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer 2

您可以尝试使用currentTarget

 let a = e.currentTarget.parentNode.getAttribute("key");

或

 let a = ReactDOM.findDOMNode(this).parentNode.getAttribute("key")

Answer 3

在ReactJS中，“键”供React内部使用，不会包含在DOM中。这可能是你所得到空的原因。

您只需要添加另一个道具/属性。像下面这样的东西应该起作用。

import $ from 'jquery';
import 'select2';


$('selector').select2(); //selector can be className, ID, tag name , attributeName , etc ...

此外，如果输入元素的“ID”是一样的在你的DIV（父）元素中的“关键”，那么你可以简单做到以下几点：

deletepost(e) {
let a = e.target.parentNode.getAttribute("postid"));
  console.log(a);
}

render() {
    return (
      <div>
          {     
          this.props.posts.map((post, i) =>
            <div id="a" key="1" postId="1">
            <span> <h3>{post.title}</h3><p>{post.post}</p></span>
            <input type="button" value="Delete" id="1" onClick={this.deletepost}/>
            </div>
          ) 
        }        
     </div>
        )
    }    
}

在ReactJS中单击按钮时如何获取父div的键属性

3 个答案: