javascript - 在 React 中使用 onClick 函数渲染多个按钮

Question

我正在尝试使用 map 呈现多个按钮以使用react，但出现错误。

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