面试题：Solid.js中如何使用createSignal优化复杂表单的状态管理

Question

假设你正在开发一个具有多个输入框和下拉菜单的复杂表单，使用Solid.js的createSignal ，描述如何有效地管理表单状态，包括如何处理输入变化、初始状态设置以及如何在表单提交时获取所有值。请给出关键代码示例。

Answer 1

1. 设置初始状态：
   • 使用 createSignal 来创建信号存储表单各个字段的值。例如，对于一个有用户名输入框和性别下拉菜单的表单：

   import { createSignal } from'solid-js';
   
   const [username, setUsername] = createSignal('');
   const [gender, setGender] = createSignal('male');// 假设初始性别为男
   

2. 处理输入变化：
   • 对于输入框，通过 onInput 事件来更新相应的信号值。对于下拉菜单，通过 onChange 事件更新信号值。

   <input type="text" onInput={(e) => setUsername(e.target.value)} />
   <select onChange={(e) => setGender(e.target.value)}>
       <option value="male">Male</option>
       <option value="female">Female</option>
   </select>
   

3. 表单提交时获取所有值：
   • 在表单的 submit 事件处理函数中，通过信号的 get 方法获取当前值。

   const handleSubmit = (e) => {
       e.preventDefault();
       const currentUsername = username();
       const currentGender = gender();
       console.log('Submitted values:', { currentUsername, currentGender });
       // 这里可以进行后续的提交逻辑，比如发送到服务器
   };
   
   <form onSubmit={handleSubmit}>
       <input type="text" onInput={(e) => setUsername(e.target.value)} />
       <select onChange={(e) => setGender(e.target.value)}>
           <option value="male">Male</option>
           <option value="female">Female</option>
       </select>
       <button type="submit">Submit</button>
   </form>