一.state
BodyIndex.js
import React from 'react';
export default class BodyIndex extends React.Component {
constructor(){
super(); //调用基类的所有的初始化方法
this.state = {
username : "Parry",
age : 20
}; //初始化赋值
}
render() {
setTimeout(()=>{
//更改 state 的时候
this.setState({username: "IMOOC",age : 30});
},4000);
return (
<div>
<h2>页面的主体内容</h2>
<p>{this.state.username} {this.state.age} {this.props.userid} {this.props.username}</p>
</div>
)
}
}
小结:
初始化:this.state = {username:’’}
修改:this.setState({username;’’})
state的作用只作用域当前的类,不污染其他模块
二.props
BodyIndex.js
import React from 'react';
class BodyIndex extends React.Component{
constructor(arg) {
super();//调用所有基类的初始方法
}
render(){
setTimeout(()=>{
this.setState({
username:"kgc"
})
},4000)
return (
<div>
<p>{this.props.userid}</p>
</div>
)
}
}
export default BodyIndex;
app.js
import React from 'react';
class BodyIndex extends React.Component{
constructor(arg) {
super();//调用所有基类的初始方法
}
render(){
setTimeout(()=>{
this.setState({
username:"kgc"
})
},4000)
return (
<div>
<p>{this.props.userid}</p>
</div>
)
}
}
export default BodyIndex;
小结:
props对于外来模块 属于外来属性
传递参数:
接收参数:this.props.username
三.事件与数据绑定–子组件向父组件传值
1.事件的使用 bodyIndex.js
import React from 'react';
class BodyIndex extends React.Component{
constructor(arg) {
super();//调用所有基类的初始方法
this.state = {
username:"zhangsan",
age:20
}
}
changeUserInfo(){
this.setState({
username:"kgc"
})
}
render(){
return (
<div>
<p>{this.state.username}</p>
<p><input type="button" value="提交" onClick={this.changeUserInfo.bind(this)} /></p>
</div>
)
}
}
export default BodyIndex;
2.子组件向父组件传值
bodychild.js
import React from 'react';
export default class BodyChild extends React.Component{
render(){
return(
<div>
<p>子页面输入:<input type="text" onChange={this.props.handleChildValueChange}/></p>
</div>
)
}
}
bodyIndex.js
import React from 'react';
import BodyChild from './bodychild';
class BodyIndex extends React.Component{
constructor(arg) {
super();//调用所有基类的初始方法
this.state = {
username:"zhangsan",
age:20
}
};
changeUserInfo(){
this.setState({
username:"kgc"
})
};
handleChildValueChange(event) {
this.setState({username: event.target.value});
};
render(){
return (
<div>
<p>{this.state.username}</p>
<p><input type="button" value="提交" onClick={this.changeUserInfo.bind(this)} /></p>
<BodyChild handleChildValueChange={this.handleChildValueChange.bind(this)}/>
</div>
)
}
}
export default BodyIndex;
四.可复用组件
bodyIndex.js
import React from 'react';
import BodyChild from './bodychild';
import PropTypes from "prop-types";
const defaultProps = {
username: '这是一个默认的用户名'
};
export default class BodyIndex extends React.Component{
constructor(arg) {
super();//调用所有基类的初始方法
this.state = {
username:"lisi",
age:20
}
};
changeUserInfo(a){
this.setState({
age:a
})
};
handleChildValueChange(event) {
this.setState({username: event.target.value});
};
render(){
return (
<div>
<p>username:{this.props.username}</p>
<p>userid:{this.props.userid}</p>
<p><input type="button" value="提交" onClick={this.changeUserInfo.bind(this,99)} /></p>
<BodyChild handleChildValueChange={this.handleChildValueChange.bind(this)}/>
</div>
)
}
}
BodyIndex.propTypes = {
userid: PropTypes.number.isRequired, //加上isRequired以后,即使父组件没传递值也会抛出警告
}
//默认值设置
BodyIndex.defaultProps = defaultProps;
app.js中使用
import React from 'react';
import './App.css';
import ComponentHeader from "./components/header";
import ComponentFooter from "./components/footer";
import ComponentIndex from "./components/BodyIndex";
//注意:主键名用大写
function App() {
var loginState = 0;
var componentHeader ;//注意:变量名用小写
if(loginState==0){
componentHeader = <ComponentHeader />
}
return (
<div className="App">
{componentHeader}
<ComponentIndex userid={123}/>
<ComponentFooter />
</div>
);
}
export default App;
bodychild.js中继承父级的props,并且自己定义props
1.父级在调用子组件时
import React from 'react';
import BodyChild from './bodychild';
import PropTypes from "prop-types";
const defaultProps = {
username: '这是一个默认的用户名'
};
export default class BodyIndex extends React.Component{
constructor(arg) {
super();//调用所有基类的初始方法
this.state = {
username:"lisi",
age:20
}
};
changeUserInfo(a){
this.setState({
age:a
})
};
handleChildValueChange(event) {
this.setState({username: event.target.value});
};
render(){
return (
<div>
<p>username:{this.props.username}</p>
<p>userid:{this.props.userid}</p>
<p><input type="button" value="提交" onClick={this.changeUserInfo.bind(this,99)} /></p>
<BodyChild {...this.props} id={1} handleChildValueChange={this.handleChildValueChange.bind(this)}/>
</div>
)
}
}
//数据类型设置
BodyIndex.propTypes = {
userid: PropTypes.number.isRequired, //加上isRequired以后,即使父组件没传递值也会抛出警告
}
//默认值设置
BodyIndex.defaultProps = defaultProps;
2.子页面输出 bodychild.js
<p>{this.props.userid} {this.props.username} {this.props.id}</p>
五.Refs
六.Mixins
1.安装:npm install --save mixin@2
2.mixin.js
const MixinLog = {
componentDidMount(){
console.log("MixinLog componentDidMount");
},
log(){
console.log("abcdefg...");
}
};
export default MixinLog
3.使用:
bodyindex.js
import React from 'react';
import BodyChild from './bodychild';
import PropTypes from "prop-types";
import ReactMixin from 'react-mixin';
import MixinLog from './mixins';
const defaultProps = {
username: '这是一个默认的用户名'
};
export default class BodyIndex extends React.Component{
constructor(arg) {
super();//调用所有基类的初始方法
this.state = {
username:"lisi",
age:20
}
};
changeUserInfo(a){
this.setState({
age:a
})
//第一种方式
// var mySubmitBotton = document.getElementById('submitButton');
// console.log(mySubmitBotton);
// ReactDOM.findDOMNode(mySubmitBotton).style.color = 'red';
//第二种方式
console.log(this.refs.submitButton);
this.refs.submitButton.style.color = 'red';
};
handleChildValueChange(event) {
this.setState({username: event.target.value});
};
render(){
return (
<div>
<p>username:{this.props.username}</p>
<p>userid:{this.props.userid}</p>
<p><input type="button" ref="submitButton" value="提交" onClick={this.changeUserInfo.bind(this,99)} /></p>
<BodyChild {...this.props} id={1} handleChildValueChange={this.handleChildValueChange.bind(this)}/>
</div>
)
}
}
//数据类型设置
BodyIndex.propTypes = {
userid: PropTypes.number.isRequired, //加上isRequired以后,即使父组件没传递值也会抛出警告
}
//默认值设置
BodyIndex.defaultProps = defaultProps;
ReactMixin(BodyIndex.prototype, MixinLog);