事件处理 #

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

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

function Form() {
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form submitted');
  };

  const handleInput = (e) => {
    console.log('Input value:', e.target.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input onInput={handleInput} />
      <button type="submit">Submit</button>
    </form>
  );
}

function MouseEvents() {
  return (
    <div
      onClick={() => console.log('click')}
      onDoubleClick={() => console.log('double click')}
      onMouseEnter={() => console.log('mouse enter')}
      onMouseLeave={() => console.log('mouse leave')}
      onMouseDown={() => console.log('mouse down')}
      onMouseUp={() => console.log('mouse up')}
    >
      Mouse Events Demo
    </div>
  );
}

function KeyboardEvents() {
  const handleKeyDown = (e) => {
    console.log('Key:', e.key);
    console.log('Code:', e.code);
    console.log('Ctrl:', e.ctrlKey);
    console.log('Shift:', e.shiftKey);
  };

  return (
    <input
      onKeyDown={handleKeyDown}
      onKeyUp={(e) => console.log('Key up:', e.key)}
    />
  );
}

function FormEvents() {
  const [value, setValue] = createSignal('');

  return (
    <form onSubmit={(e) => e.preventDefault()}>
      <input
        value={value()}
        onInput={(e) => setValue(e.target.value)}
        onChange={(e) => console.log('Change:', e.target.value)}
        onFocus={() => console.log('Focused')}
        onBlur={() => console.log('Blurred')}
      />
      <select onChange={(e) => console.log('Selected:', e.target.value)}>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
      </select>
    </form>
  );
}

<button onClick={() => setCount(c => c + 1)}>
  Increment
</button>

function Counter() {
  const [count, setCount] = createSignal(0);

  const increment = () => setCount(c => c + 1);
  const decrement = () => setCount(c => c - 1);

  return (
    <div>
      <button onClick={decrement}>-</button>
      <span>{count()}</span>
      <button onClick={increment}>+</button>
    </div>
  );
}

function TodoList() {
  const [todos, setTodos] = createSignal([
    { id: 1, text: 'Learn Solid' },
    { id: 2, text: 'Build app' }
  ]);

  const deleteTodo = (id) => {
    setTodos(prev => prev.filter(t => t.id !== id));
  };

  return (
    <ul>
      <For each={todos()}>
        {(todo) => (
          <li>
            {todo.text}
            <button onClick={() => deleteTodo(todo.id)}>
              Delete
            </button>
          </li>
        )}
      </For>
    </ul>
  );
}

function ButtonGroup() {
  const handleClick = (e) => {
    const action = e.target.dataset.action;
    switch (action) {
      case 'save':
        console.log('Save');
        break;
      case 'cancel':
        console.log('Cancel');
        break;
    }
  };

  return (
    <div onClick={handleClick}>
      <button data-action="save">Save</button>
      <button data-action="cancel">Cancel</button>
    </div>
  );
}

function CustomButton(props) {
  return (
    <button onClick={props.onAction}>
      {props.label}
    </button>
  );
}

// 使用
<CustomButton
  label="Click me"
  onAction={() => console.log('Action!')}
/>

function EventEmitter(props) {
  const emit = (eventName, data) => {
    const handler = props[`on${eventName}`];
    if (handler) handler(data);
  };

  return (
    <button onClick={() => emit('Click', { timestamp: Date.now() })}>
      Emit Event
    </button>
  );
}

// 好的命名
<button onClick={handleClick}>Click</button>
<form onSubmit={handleSubmit}>...</form>
<input onChange={handleChange} />

// 避免
<button onClick={click}>Click</button>

// 表单提交
<form onSubmit={(e) => {
  e.preventDefault();
  handleSubmit();
}}>

// 链接点击
<a href="#" onClick={(e) => {
  e.preventDefault();
  navigate('/path');
}}>
  Link
</a>

function MyComponent() {
  // 状态
  const [count, setCount] = createSignal(0);

  // 事件处理函数
  const handlers = {
    increment: () => setCount(c => c + 1),
    decrement: () => setCount(c => c - 1),
    reset: () => setCount(0)
  };

  return (
    <div>
      <button onClick={handlers.decrement}>-</button>
      <span>{count()}</span>
      <button onClick={handlers.increment}>+</button>
      <button onClick={handlers.reset}>Reset</button>
    </div>
  );
}