在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');