在React中使用onClick功能渲染多個按鈕

Question

我正在嘗試使用地圖在響應中渲染多個按鈕，但出現錯誤。

 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> 

我將index作為ID用於按鈕，並將NameArray屬性用作按鈕的名稱。

我嘗試將按鈕的渲染拆分為新功能，但是我不確定如何執行此操作。

Answer 1

顯然您錯過了querySelector函數中的#登錄。

document.querySelector('#app');