面试题：Solid.js中JSX表单处理基础

Question

在Solid.js的JSX中，如何绑定表单输入元素（如<input>）的值到组件的状态，并处理输入值的变化？请给出代码示例。

Answer 1

在Solid.js的JSX中，可以通过createSignal创建状态，并使用onInput事件处理输入值的变化。以下是代码示例：

import { createSignal } from 'solid-js';

const InputComponent = () => {
  const [inputValue, setInputValue] = createSignal('');

  const handleInput = (e) => {
    setInputValue(e.target.value);
  };

  return (
    <div>
      <input type="text" value={inputValue()} onInput={handleInput} />
      <p>输入的值是: {inputValue()}</p>
    </div>
  );
};

export default InputComponent;

上述代码中：

1. 使用createSignal创建了一个名为inputValue的状态以及对应的更新函数setInputValue，初始值为空字符串。
2. 在<input>元素上，通过value属性绑定inputValue状态，通过onInput事件监听输入变化，调用handleInput函数更新状态。
3. 在组件中展示了当前输入的值。