面试题：Solid.js 结合 JSX 实现复杂动态表单及数据校验

Question

使用 Solid.js 和 JSX 创建一个包含多个输入框（文本框、下拉框、单选框等）的复杂表单。要求实现实时数据校验，例如文本框不能为空，下拉框必须选择一个有效选项，单选框必须选中一个。并且当表单数据校验通过时，能将表单数据以正确的格式提交给一个模拟的后端接口（可以使用 console.log 打印提交的数据模拟）。阐述实现过程中涉及的 Solid.js 的响应式原理及状态管理方式。

Answer 1

1. 创建表单结构

首先，使用 Solid.js 和 JSX 创建表单结构，包含文本框、下拉框和单选框。

import { createSignal, onSubmit } from "solid-js";

const App = () => {
  const [textValue, setTextValue] = createSignal('');
  const [selectValue, setSelectValue] = createSignal('');
  const [radioValue, setRadioValue] = createSignal('');

  const handleSubmit = (e) => {
    e.preventDefault();
    // 数据校验
    if (!textValue() ||!selectValue() ||!radioValue()) {
      console.error('表单数据校验不通过');
      return;
    }
    const formData = {
      text: textValue(),
      select: selectValue(),
      radio: radioValue()
    };
    console.log('提交数据到后端:', formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        文本框:
        <input type="text" value={textValue()} onChange={(e) => setTextValue(e.target.value)} />
      </label>
      <br />
      <label>
        下拉框:
        <select value={selectValue()} onChange={(e) => setSelectValue(e.target.value)}>
          <option value="">请选择</option>
          <option value="option1">选项1</option>
          <option value="option2">选项2</option>
        </select>
      </label>
      <br />
      <label>
        单选框:
        <input type="radio" value="radio1" checked={radioValue() === 'radio1'} onChange={() => setRadioValue('radio1')} /> 选项A
        <input type="radio" value="radio2" checked={radioValue() === 'radio2'} onChange={() => setRadioValue('radio2')} /> 选项B
      </label>
      <br />
      <button type="submit">提交</button>
    </form>
  );
};

export default App;

2. Solid.js 响应式原理

Solid.js 使用细粒度的响应式系统。createSignal 函数创建一个信号，信号由一个值和一个更新函数组成。当信号的值发生变化时，依赖该信号的组件会自动重新渲染。例如，在上面的代码中，textValue、selectValue 和 radioValue 都是信号，它们的值变化会导致表单组件重新渲染。

3. 状态管理方式

在这个例子中，我们使用 createSignal 来管理表单的状态。每个输入框对应一个信号，通过更新函数（如 setTextValue、setSelectValue、setRadioValue）来改变信号的值，从而实现状态的更新。并且在 handleSubmit 函数中获取最新的状态值进行数据校验和提交。这种方式简单直接，适用于小型表单场景。对于更复杂的状态管理，Solid.js 还提供了 createStore 等工具，可用于管理应用中更大型的状态树。