面试题：Solid.js 中如何绑定和处理普通 DOM 元素的点击事件

Question

在 Solid.js 项目中，假设你有一个按钮元素，描述实现点击按钮后触发一个函数并在控制台打印 'Button Clicked' 的具体步骤，包括如何导入必要的模块以及编写事件处理函数。

Answer 1

1. 导入必要模块： 在Solid.js项目中，一般会用到createSignal和onClick相关功能。假设项目使用ES6模块系统，首先在JavaScript文件开头导入所需模块：

import { createSignal } from 'solid-js';

2. 编写事件处理函数： 定义一个函数用于处理按钮点击事件，在该函数中执行在控制台打印信息的操作。

const handleClick = () => {
    console.log('Button Clicked');
};

3. 创建按钮元素并绑定事件： 在Solid.js的JSX部分创建按钮元素，并通过onClick属性绑定事件处理函数。

import { createSignal } from 'solid-js';
import { render } from'solid-js/web';

const handleClick = () => {
    console.log('Button Clicked');
};

const App = () => {
    return (
        <button onClick={handleClick}>Click Me</button>
    );
};

render(() => <App />, document.getElementById('app'));

上述代码首先导入createSignal，然后定义点击处理函数handleClick，最后在App函数组件中创建按钮并绑定点击事件，通过render函数将App渲染到页面的app元素中。当按钮被点击时，控制台会打印Button Clicked。