一、场景
在父组件显示数值，在子组件有个按钮点击后修改父组件的值。
二、代码
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.0-rc.0/umd/react.production.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/0.0.0-0c756fb-f7f79fd/umd/react-dom.production.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
|
CSS
1
2
3
4
5
6
| .father {
background: #000;
}
.son {
background: #333;
}
|
JSX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
| function App(){
return (
<div>
<Father/>
</div>
)
}
class Father extends React.Component{
constructor(){
super()
this.state = {
number: 0
}
}
changeValue(){
this.setState({
number: this.state.number + 1
})
}
render(){
return (
<div className="father">
<div>{this.state.number}</div>
<Son change={this.changeValue.bind(this)}/>
</div>
)
}
}
class Son extends React.Component {
constructor(){
super()
}
render(){
return (
<div className="son">
<button onClick={this.props.change}>更改值</button>
</div>
)
}
}
render()
function render(){
ReactDOM.render(<App/>, document.querySelector('#root'))
}
|
三、结论
在父组件声明一个函数，用于修改父组件中的值。
将此函数通过子组件的props进行传参
1
| <Son change={this.changeValue.bind(this)}>
|
子组件接收后，即可调用外部函数
1
| <button onClick={this.props.change}>更改值</button>
|
四、代码效果预览
预览链接