title: how to get the 'e.key' of li element in react.js?
body: <h1>how to get the 'e.key' of li element in react.js?</h1>
  
  <blockquote>
    <p>I just can't get the event target <code>e.key</code>, what's wrong with this?</p>
  </blockquote>
  
  <p>Anybody can help me with this problem?</p>
  
  <h2>online playaround link!</h2>
  
  <p><a href="https://jscomplete.com/repl" rel="nofollow noreferrer">https://jscomplete.com/repl</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// import React, {Component} from 'react';
  // import PropTypes from 'prop-types';
  
  class RMT extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              data: this.props.data || []
          };
      }
      // 递归调用
      markNode = (data) =&gt; {
          let nodes;
          if (Object.prototype.toString.call(data) == "[object Array]") {
              nodes = data.map(
                  (item) =&gt; {
                      let node = (
                          &lt;li
                              key={this.count++}
                              style={{color: 'red'}}
                              onClick={(e) =&gt; this.props.onClick(e)}
                              &gt;
                              &lt;span&gt;{item.text}&lt;/span&gt;
                          &lt;/li&gt;
                      );
                      if (item.children &amp;&amp; item.children.length) {
                          node = (
                              &lt;li
                                  key={this.count++}
                                  style={{color: 'green', marginLeft: '10px'}}
                                  onClick={(e) =&gt; this.props.onClick(e)}
                                  &gt;
                                  &lt;span&gt;{item.text}&lt;/span&gt;
                                  {this.markNode(item.children)}
                              &lt;/li&gt;
                          );
                      }
                      return node;
                  }
              );
          }
          return (
              &lt;ul style={{border: '1px solid red'}} onClick={this.props.onClick}&gt;
                  {nodes}
              &lt;/ul&gt;
          );
      };
      render() {
          this.count = 0;
          return(
              this.markNode(this.state.data)
          );
      }
  }
  
  export {RMT};
  export default RMT;
  
  class App extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              // 
          };
      }
      onClick = (e) =&gt; {
          // 阻止事件的默认行为，防止事件冒泡！
          e.preventDefault();
          e.stopPropagation();
          // alert(`e`, e.key);
          console.log('e.key', e.key);
          console.log('e.text', e.text);
          console.log('e.innerHTML', e.innerHTML);
          console.log('e.innerText', e.innerText);
      };
      render () {
          const datas = [
              {
                  text: 'root',
                  children: [
                      {
                          text: 'chlid1',
                          children: [
                              {
                                  text: 'chlid3'
                              }
                          ]
                      }
                  ]
              }
          ];
          return (
              &lt;div&gt;
                  &lt;RMT data={datas} onClick={this.onClick}/&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default App;
  
  ReactDOM.render(
      &lt;div&gt;
          &lt;App /&gt;
      &lt;/div&gt;
      , mountNode
  );</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>