面试题：Solid.js中JSX事件绑定基础

Question

在Solid.js的JSX中，如何为一个按钮绑定点击事件并传递参数？请写出具体代码示例，并解释为何要这样写。

Answer 1

在Solid.js的JSX中，可以通过以下方式为按钮绑定点击事件并传递参数：

import { createSignal } from 'solid-js';

const App = () => {
  const [count, setCount] = createSignal(0);

  const handleClick = (param) => {
    setCount(count() + param);
  };

  return (
    <div>
      <button onClick={() => handleClick(1)}>点击增加1</button>
      <p>Count: {count()}</p>
    </div>
  );
};

export default App;

解释：

1. 创建状态和更新函数：使用createSignal创建了一个状态count以及对应的更新函数setCount。
2. 定义点击处理函数：handleClick函数接收一个参数param，并使用setCount更新count的值，这里通过count()获取当前count的值，然后加上传递进来的参数。
3. 绑定点击事件并传递参数：在<button>标签中，通过onClick属性绑定一个匿名函数() => handleClick(1)。这样当按钮被点击时，就会调用handleClick函数并传递参数1。这种写法是因为onClick需要一个函数作为值，直接写handleClick(1)会立即执行函数，而不是在点击时执行，通过包裹一层匿名函数，确保handleClick在点击时才被调用并传递参数。