事件处理与表单

function Button() {
  function handleClick(e) {
    e.preventDefault();    // ✅
    e.stopPropagation();   // ✅
    console.log(e.type);         // "click"
    console.log(e.nativeEvent);  // 原生浏览器事件
  }
  return <button onClick={handleClick}>Click</button>;
}

// 箭头函数包裹
<button onClick={() => handleDelete(item.id)}>删除</button>

// 柯里化
<button onClick={handleDelete(item.id)}>
  {/* 此时 handleDelete 需返回一个函数 */}
</button>

function Form() {
  function handleSubmit(e) {
    e.preventDefault();  // 阻止表单默认提交（页面刷新）
    // 处理提交逻辑
  }
  return <form onSubmit={handleSubmit}>...</form>;
}

// class 组件三种绑定方式
class Form extends React.Component {
  constructor() {
    this.handleA = this.handleA.bind(this);    // 方式1：构造器绑定
  }
  handleB = () => {}                           // 方式2：class fields（最推荐）
  render() {
    return <button onClick={() => this.handleC()}>  {/* 方式3：箭头函数 */}
  }
}

// React 的 onChange ≈ 原生 onInput（每击键触发）
<input onChange={e => console.log(e.target.value)} />

function ControlledForm() {
  const [form, setForm] = useState({ name: '', email: '' });

  function handleChange(e) {
    const { name, value } = e.target;
    setForm(prev => ({ ...prev, [name]: value }));
  }

  function handleSubmit(e) {
    e.preventDefault();
    console.log(form);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" value={form.name} onChange={handleChange} />
      <input name="email" value={form.email} onChange={handleChange} />
      <button type="submit">提交</button>
    </form>
  );
}

// textarea（React 中用 value，而非 innerHTML）
<textarea value={text} onChange={e => setText(e.target.value)} />

// select
<select value={fruit} onChange={e => setFruit(e.target.value)}>
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
</select>

// checkbox
<input
  type="checkbox"
  checked={isAgreed}
  onChange={e => setIsAgreed(e.target.checked)}
/>

// radio
<input
  type="radio"
  value="male"
  checked={gender === 'male'}
  onChange={e => setGender(e.target.value)}
/>

// 文件上传（只能是非受控）
<input type="file" onChange={e => setFile(e.target.files[0])} />

function UncontrolledForm() {
  const nameRef = useRef(null);
  const emailRef = useRef(null);

  function handleSubmit(e) {
    e.preventDefault();
    const data = {
      name: nameRef.current.value,
      email: emailRef.current.value,
    };
    console.log(data);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input ref={nameRef} defaultValue="张三" />
      <input ref={emailRef} />
      <button type="submit">提交</button>
    </form>
  );
}

function validate(values) {
  const errors = {};
  if (!values.name) errors.name = '姓名必填';
  if (!values.email.includes('@')) errors.email = '邮箱格式不正确';
  return errors;
}

import { useForm } from 'react-hook-form';

function MyForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('name', { required: '姓名必填' })} />
      {errors.name && <span>{errors.name.message}</span>}

      <input {...register('email', {
        pattern: { value: /^\S+@\S+$/i, message: '格式不正确' }
      })} />
      {errors.email && <span>{errors.email.message}</span>}

      <button type="submit">提交</button>
    </form>
  );
}

function Outer() {
  return (
    <div onClick={() => console.log('outer')}>
      <button onClick={e => {
        e.stopPropagation();  // 阻止冒泡到 outer
        console.log('inner');
      }}>
        Click
      </button>
    </div>
  );
}