【React】事件绑定、React组件、useState、基础样式

React 教程

目录

1. 事件绑定
   1.1. 基础实现
   1.2. 使用事件参数
   1.3. 传递自定义参数
   1.4. 同时传递事件对象和自定义参数

2. React 组件
   2.1. 组件是什么
   2.2. 组件基础使用

3. useState：状态管理
   3.1. 基础使用
   3.2. 状态的修改规则
   3.3. 修改对象状态

4. 基础样式
   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;
}

---