为什么 onClick 不能处理我的 React 项目

Question

onclick 在我的 React 组件上不起作用，这是我的代码：

const listItems = xox.map((nums) =>
    <Square key={nums.index} cont={nums.content} onclick={function (){
        alert();
    }}/>
);

我也尝试过这个但是在渲染页面时提醒工作：

    <Square key={nums.index} cont={nums.content} onclick={alert()}/>

我的应用功能：

function App() {
  return (
    <div className="App">
        <header>
          <img src={logo} alt="React logo"/>
            <h1>XOX</h1>
        </header>
        <div className="playground">
            {listItems}
        </div>
    </div>
  );
}

Square.js

import React from "react";
export class Square extends React.Component {
    render() {
    return (
        <div className="square" onClick={this.props.onclick}>
            {this.props.cont}
        </div>
    )
}
}

Answer 1

尝试使用箭头函数：

<Square key={nums.index} cont={nums.content} onClick={() => alert('hello world')}/>

Answer 2

您需要确保您的 Square 组件接受并使用 onclick 道具。例如，类似于：

const Square = ({ cont, onclick }) => (
  <div onClick={onclick}>{cont}</div>
);

否则该 prop 将被忽略，因为它没有在组件内部使用。

also i tried this but alert working on the when render the page:

是的，您需要传递一个 function 作为 prop，而不是 invoke 函数然后将结果作为 prop 传递。这个：

return <Square key={nums.index} cont={nums.content} onclick={alert()}/>

相当于做

const result = alert();
return <Square key={nums.index} cont={nums.content} onclick={result}/>;

所以你需要

onclick={() => alert()}

（或使用 function 关键字，尽管不那么简洁）

如果可能的话，我还建议使用 React 点击处理程序的标准大写字母，即 onClick，而不是 onclick - 这样混淆人们的可能性较小。

为什么 onClick 不能处理我的 React 项目

why onClick isn't working on my react project

javascript

jsx

reactjs