首页 › JavaScript › React 教程

事件处理与条件渲染

React 教程 · 第 5 章 · 5 次浏览

React 事件用驼峰命名（onClick、onChange），传函数引用而不是调用结果。条件渲染就是在 JSX 里用 JS 的表达式控制显示什么。

事件绑定

onClick={handleClick}，不要写 onClick={handleClick()}（那是立即执行）。传参数用箭头函数包一层。

表单受控组件

输入框的值由 state 控制，onChange 更新 state，这就是受控组件。数据流是"React 说了算"，便于校验和联动。

条件渲染

  • 三元：{isLogin ? <User/> : <LoginBtn/>}
  • 短路：{isShow && <p>内容</p>}
  • 变量：把 JSX 存进变量再输出

代码示例

import { useState } from "react";

function LoginForm() {
    const [username, setUsername] = useState("");
    const [error, setError] = useState("");

    function handleSubmit(e) {
        e.preventDefault();
        if (username.length < 3) {
            setError("用户名至少 3 个字符");
            return;
        }
        setError("");
        alert("提交成功");
    }

    return (
        <form onSubmit={handleSubmit}>
            <input
                value={username}
                onChange={e => setUsername(e.target.value)}
                placeholder="用户名"
            />
            {error && <p style={{ color: "red" }}>{error}</p>}
            <button type="submit">登录</button>
        </form>
    );
}
📚 JavaScript 语法速查
常用条目速查，完整版见对应教程章节。可复制代码到在线运行中测试。
写法 / 语法作用
let x = 1;声明变量（可重新赋值）
const y = 2;声明常量（不可重新赋值）
var 已过时旧式变量声明，建议用 let/const
if (条件) { } else { }条件判断
for (let i = 0; i < n; i++) { }循环
while (条件) { }条件循环
function fn(a, b) { return a + b; }函数声明
const fn = (a) => a + 1;箭头函数
array.push(x) / pop()数组尾部添加 / 删除
array.map(fn) / filter(fn)数组映射 / 过滤
obj.key / obj["key"]访问对象属性
JSON.stringify(obj)对象转 JSON 字符串
JSON.parse(str)JSON 字符串转对象
document.getElementById("id")按 id 取元素
document.querySelector("选择器")按选择器取第一个元素
element.textContent读写元素文本
element.innerHTML读写元素 HTML（慎用，防 XSS）
element.addEventListener("click", fn)绑定事件
console.log(x)控制台输出（调试）
setTimeout(fn, 1000)延迟执行（毫秒）
window.location.href当前页面地址（可赋值跳转）
localStorage.setItem("k", v)本地存储写入
localStorage.getItem("k")本地存储读取
new Promise((resolve, reject) => {})Promise 异步处理
async / await异步函数语法糖
📖 延伸阅读