4
votes

Comment obtenir l'attribut clé du div parent lorsque le bouton est cliqué dans ReactJS

Je souhaite obtenir l'attribut clé de la div parent lorsque le bouton enfant est cliqué. En utilisant le code que j'écris, je reçois null dans la console. Je ne comprends pas pourquoi?

J'ai essayé

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>
        )
    }    
}

Mais cela me donne une valeur nulle dans la console.

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

I J'attends "1" mais je reçois null. Merci d'avance.

reactjs

0 commentaires

3 Réponses :

1
votes

Vous pouvez essayer avec currentTarget

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

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

1 commentaires

Non, toujours nul.

1
votes

vous pouvez remplacer l'attribut 'key' par 'data-key' et obtenir un attribut comme celui-ci:

<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>

// 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")
);

2 commentaires

En fait, je rend ce composant dans un autre composant comme ceci: "" et l'état du composant parent "posts" est passé comme accessoire dans ce composant. Comment implémenter votre logique dans mon scénario?

peu importe comment vous appelez votre composant, il vous suffit donc de changer l'attribut parent en 'data-key' et d'accéder à la fonction 'deletepost'

1
votes

Dans ReactJS, la "clé" est destinée à l'usage interne de React et ne sera pas incluse dans le DOM. C'est peut-être la raison pour laquelle vous obtenez null.

Vous devez simplement ajouter un autre accessoire / attribut. Quelque chose comme ci-dessous devrait fonctionner.

deletepost(e) {
let a = e.target.id;
  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>
        )
    }    
}

De plus, si l '"id" de l'élément d'entrée est identique à la "clé" de votre élément div (parent), vous pouvez faites simplement ce qui suit:

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>
        )
    }    
}

0 commentaires