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