react 点击事件和传参

onClick 传入的是函数，不是表达式

1. 方法一：嵌入表达式
   简单使用

const param = "我是参数";
function App() {
  return (
    <div>
      <div
        onClick={(e) => {
          console.log(e);
          console.log(param);
        }}
      >
        单击
      </div>
    </div>
  );
}

export default App;

列表渲染，事件传参

const list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
const param = "我是参数";
const listEl = list.map((item, index) => {
  return (
    <div
      key={index}
      onClick={(e) => {
        console.log(e);
        console.log(index);
        console.log(item);
        console.log(param);
      }}
    >
      {item}
    </div>
  );
});

function App() {
  return (
    <div>
      <div>{listEl}</div>
    </div>
  );
}

export default App;

2. 方法二：函数抽离

const param = "我是参数";
function fnLog() {
  return (e) => {
    console.log(param);
    console.log(e);
  };
}
function App() {
  return (
    <div>
      <div onClick={fnLog()}>单击</div>
    </div>
  );
}

export default App;