Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit e50589c

Browse files
author
victorsun
committed
upd: react
1 parent 295edba commit e50589c

File tree

30 files changed

+401
-0
lines changed

30 files changed

+401
-0
lines changed
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
const App = () => {
2+
return <h1>函数组件</h1>
3+
};
4+
5+
export default App;
Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from "react";
2+
3+
class App extends React.Component {
4+
5+
// ...类组件使用 this 获取各类属性方法
6+
7+
// 创建属性存储DOM对象
8+
divRef = React.createRef();
9+
10+
// 向state中添加属性
11+
state = {
12+
count: 0,
13+
};
14+
15+
clickHandler = () => {
16+
// 【1】
17+
// this.setState({count: 1});
18+
19+
// 【2】
20+
this.setState(prevState => {
21+
return {
22+
count: prevState.count + 1
23+
}
24+
});
25+
};
26+
27+
// 必须包含 render 方法,返回虚拟 DOM
28+
render() {
29+
return (
30+
<div ref={this.divRef}>
31+
<h1>类组件{this.props.item}</h1>
32+
<span>{this.state.count}</span>
33+
<button onClick={this.clickHandler}>click</button>
34+
</div>
35+
);
36+
}
37+
}
38+
39+
export default App;
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import ReactDOM from "react-dom/client";
2+
import App1 from "./App1"; // 函数组件
3+
import App2 from "./App2"; // 类组件
4+
5+
const root = ReactDOM.createRoot(document.getElementById('root'));
6+
7+
const propDatas = [1, 2, 3];
8+
const app2 = propDatas.map(item => <App2 item={item} />);
9+
10+
root.render(<div><App1/>{app2}</div>);
Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
const App = () => {
2+
3+
/*
4+
原生DOM操作
5+
6+
<button onclick="alert('test')">click</button>
7+
<button id="test">click</button>
8+
document.getElementById('test').onclick = function(){};
9+
document.getElementById('test').addEventListener('click', function(){}, false);
10+
*/
11+
12+
/*
13+
React中事件通过元素属性设置
14+
15+
和原生JS不同,React中事件的属性需要使用驼峰命名法:
16+
onclick -> onClick
17+
onchange -> onChange
18+
19+
属性值不能直接执行代码,而是需要一个回调函数:
20+
onclick="alert('test')"
21+
onClick={()=>{alert('test')}}
22+
*/
23+
24+
const clickHandler = (event) => {
25+
26+
// return false; // 在React中,无法通过return false取消默认行为,原生也不推荐这样用
27+
event.preventDefault(); // 取消默认行为
28+
event.stopPropagation(); // 取消事件的冒泡
29+
30+
// 注意:React中的事件对象 event 不是原生的事件对象,因此无需再考虑兼容问题
31+
};
32+
33+
34+
return <div
35+
{/* 事件的集中绑定方式 */}
36+
style={{width: 200, height: 200, margin: '100px auto', backgroundColor:'#aaa'}}>
37+
38+
<button onClick={() => { alert('test'); }}>click</button>
39+
<a href="https://csxiaoyao.com" onClick={clickHandler}>取消默认跳转行为</a>
40+
</div>
41+
};
42+
43+
44+
45+
// 导出App
46+
export default App;

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /