在React中使用onClick函数呈现多个按钮

Question

我试图在使用map的反应中呈现多个按钮，但出现错误。

var NameArray = [{"name":"number0"},{"name":"number1"},{"name":"number2"}]; 
 

 
class RenderButtons extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.onClick = this.handleClick.bind(this); 
 
    } 
 

 
    handleClick(event) { 
 
    const {id} = event.target; 
 
    console.log(id); 
 
    } 
 
    
 
    render() { 
 
    return (
 
     <div> 
 
     {NameArray.map((obj, index) => 
 
     <h3 id={index} onClick={this.onClick}> 
 
      {obj.name} 
 
     </h3> 
 
    )} 
 
     
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(
 
<RenderButtons />, 
 
document.querySelector('app'));

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

我使用索引ID为我的按钮和NameArray属性按钮的名称。

我试着将按钮的渲染分成新函数，但我不知道如何做到这一点。

Answer 1

显然你错过#登录你的querySelector功能。

document.querySelector('#app');