【React】事件绑定、React组件、useState、基础样式
React 教程
目录
-
事件绑定
1.1. 基础实现
1.2. 使用事件参数
1.3. 传递自定义参数
1.4. 同时传递事件对象和自定义参数 -
React 组件
2.1. 组件是什么
2.2. 组件基础使用 -
useState：状态管理
3.1. 基础使用
3.2. 状态的修改规则
3.3. 修改对象状态 -
基础样式
4.1. 行内样式
4.2. 类名控制
1. 事件绑定
1.1. 基础实现
React 中的事件绑定遵循驼峰命名法。
import React from 'react';function App() {const clickHandler = () => {console.log('button按钮点击了');};return <button onClick={clickHandler}>click me</button>;
}export default App;
1.2. 使用事件参数
事件回调函数中设置形参 e 以获取事件对象。
function App() {const clickHandler = (e) => {console.log('button按钮点击了', e);};return <button onClick={clickHandler}>click me</button>;
}
1.3. 传递自定义参数
通过箭头函数传递自定义参数。
function App() {const clickHandler = (name) => {console.log('button按钮点击了', name);};return <button onClick={() => clickHandler('jack')}>click me</button>;
}
1.4. 同时传递事件对象和自定义参数
传递事件对象 e 和自定义参数，注意参数顺序。
function App() {const clickHandler = (name, e) => {console.log('button按钮点击了', name, e);};return <button onClick={(e) => clickHandler('jack', e)}>click me</button>;
}
2. React 组件
2.1. 组件是什么
组件是用户界面的一部分，具有自己的逻辑和外观。
2.2. 组件基础使用
组件是首字母大写的函数，可以像标签一样使用。
import React from 'react';function Button() {return <button>click me</button>;
}function App() {return (<div><Button /><Button /></div>);
}export default App;
3. useState：状态管理
3.1. 基础使用
useState 钩子允许组件添加状态变量。
import React, { useState } from 'react';function App() {const [count, setCount] = useState(0);return (<div><button onClick={() => setCount(count + 1)}>{count}</button></div>);
}export default App;
3.2. 状态的修改规则
状态是只读的，应替换而不是直接修改状态。
function App() {const [count, setCount] = useState(0);const handleClick = () => {setCount(count + 1);};return (<div><button onClick={handleClick}>{count}</button></div>);
}
3.3. 修改对象状态
给 set 方法传递一个全新的对象来修改对象状态。
function App() {const [form, setForm] = useState({ name: "jack" });const handleClick = () => {setForm({ ...form, name: "lisi" });};return (<div><button onClick={handleClick}>{JSON.stringify(form)}</button></div>);
}
4. 基础样式
4.1. 行内样式
通过 style 属性设置行内样式。
function App() {return <div style={{ color: 'red' }}>this is div</div>;
}
4.2. 类名控制
使用 className 属性和 CSS 文件控制样式。
import React from 'react';
import './index.css'; // 引入 CSS 文件function App() {return <span className="foo">this is span</span>;
}export default App;
/* index.css */
.foo {color: red;
}