首页 › React › React 基础

Props

Props 是父组件传递给子组件的数据，子组件不可修改。

interface ButtonProps {
  label: string
  variant?: 'primary' | 'secondary'
  disabled?: boolean
  onClick: () => void
}

function Button({ label, variant = 'primary', disabled = false, onClick }: ButtonProps) {
  return (
    <button
      className={`btn btn-${variant}`}
      disabled={disabled}
      onClick={onClick}
    >
      {label}
    </button>
  )
}

事件处理

function Form() {
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()          // 阻止表单默认提交
    console.log('submitted')
  }

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.value)
  }

  const handleClick = (id: number) => {
    console.log('clicked', id)
  }

  return (
    <form onSubmit={handleSubmit}>
      <input onChange={handleChange} />
      <button onClick={() => handleClick(1)}>Click</button>
    </form>
  )
}

常见事件类型

// 鼠标事件
onClick: React.MouseEvent<HTMLButtonElement>
onMouseEnter: React.MouseEvent<HTMLDivElement>

// 表单事件
onChange: React.ChangeEvent<HTMLInputElement>
onSubmit: React.FormEvent<HTMLFormElement>

// 键盘事件
onKeyDown: React.KeyboardEvent<HTMLInputElement>

状态提升

function Parent() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>Count: {count}</p>
      <Child onIncrement={() => setCount(c => c + 1)} />
    </div>
  )
}

// 子组件通过 Props 接收回调
function Child({ onIncrement }: { onIncrement: () => void }) {
  return <button onClick={onIncrement}>+1</button>
}

小结

• Props 从父传子，只读，子组件不可修改。
• TypeScript 用 interface 定义 Props 类型。
• 事件处理：e.preventDefault() e: React.ChangeEvent 等。
• 状态提升：子 → 父通信通过回调函数 Props。

上一节：JSX 与组件 下一节：条件渲染与列表

贡献者: 布欧-Lewyon