1:新建一个Child5.js 在里面写入
import React, { Component } from 'react'
export default class Child5 extends Component {
constructor(props){
super(props);
this.state = {
num:10
}
this.add = this.add.bind(this);
this.getNum = this.getNum.bind(this);
}
getNum(){
alert(this.refs.msg.value);
this.refs.msg.style.color ="red";
}
add(){
this.setState({
num:this.state.num+1
})
}
reduce=()=>{
}
render() {
return (
<div>
<button onClick={()=>{
this.add()
}}>加法</button>
<input value={this.state.num} onChange={()=>{
}} ref="msg"></input>
<button onClick={this.add
}>减法</button>
<button onClick={this.getNum}>获取文本框的值</button>
</div>
)
}
}
2:代码注释如下
app.js中的代码如下
import React, { Component } from 'react'
import Child1 from "./Child1";
import Child2 from './Child2';
import Child3 from './Child3';
import Child4 from './Child4';
import Child5 from './Child5';
export default class App extends Component {
constructor(props){
super(props);
this.state ={
from:"我是app的数据"
}
}
show=()=>{
alert("66666");
}
render() {
return (
<div>
<Child1>
</Child1>
<Child2 from={this.state.from}>
<button onClick={()=>{
this.show()
}}>按钮</button>
<button onClick={this.show}>按钮</button>
</Child2>
<Child3></Child3>
<Child4></Child4>
<Child5></Child5>
</div>
)
}
}