面试题：Solid.js中createSignal在表单处理的应用

Question

假设你正在开发一个简单的用户注册表单，包含用户名和密码输入框。请使用Solid.js的createSignal来实现表单数据的状态管理，包括数据的实时更新和提交功能，并简要说明createSignal在这个场景中的作用。

Answer 1

代码实现

import { createSignal } from 'solid-js';

const RegisterForm = () => {
  const [username, setUsername] = createSignal('');
  const [password, setPassword] = createSignal('');

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Username:', username());
    console.log('Password:', password());
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Username:
        <input
          type="text"
          value={username()}
          onChange={(e) => setUsername(e.target.value)}
        />
      </label>
      <label>
        Password:
        <input
          type="password"
          value={password()}
          onChange={(e) => setPassword(e.target.value)}
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
};

export default RegisterForm;

createSignal在该场景中的作用

1. 状态管理：createSignal创建了两个独立的状态，即username和password。这两个状态可以独立地进行更新，而不会影响其他部分的状态。
2. 实时更新：通过setUsername和setPassword函数，当输入框的值发生变化时，相应的状态会实时更新。并且由于Solid.js的响应式系统，UI会自动重新渲染，反映出最新的状态。
3. 数据获取：在提交表单时，通过调用username()和password()可以获取到当前最新的输入值，用于后续的逻辑处理，如发送到服务器进行注册等。