1、state
state是组件对象中非常重要的属性，值以对象的形式进行存储。- 通过
state更改，从而更新页面显示的内容。- 组件中
render方法中的this指向实例对象，调用了1+n次，其中1是初始时调用。state改变状态不能直接修改，要通过setState()进行状态变更。
初始化state
state = {
isHot: false,
};render渲染
事件绑定需要用onClickrender() {
return (
<h1 onClick={this.changeWeater}>
今天天气很{this.state.isHot ? "炎热" : "凉爽"}
</h1>
);
}setState修改值
组件自定义的方法中this为undefined，如何解决？
1、强制绑定this: 通过函数对象的bind()
2、箭头函数
changeWeater = () => {
console.log("此处修改isHot的值", this);
this.setState({
isHot: !this.state.isHot,
});
}整体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>state的简写方式</title>
</head>
<body>
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 支持react对dom进行操作 -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
class Weater extends React.Component {
// 初始化状态
state = {
isHot: false,
};
// 自定义方法，用赋值语句的形式+箭头函数
changeWeater = () => {
console.log("此处修改isHot的值", this);
this.setState({
isHot: !this.state.isHot,
});
}
render() {
console.log(this);
return (
<h1 onClick={this.changeWeater}>
今天天气很{this.state.isHot ? "炎热" : "凉爽"}
</h1>
);
}
}
ReactDOM.render(<Weater />, document.getElementById("test"));
</script>
</body>
</html>2、props
props属性是只读的，不能对他进行修改。- 通过
Person.propTypes/static propTypes对标签属性进行类型、必要性限制，其中Person为class类。- 通过
Person.defaultProps/static defaultPropTypes设置属性默认值const p = { name: "tom" }; <Person {...p},通过{...p}进行传值
// 对标签属性进行类型、必要性限制
Person.propTypes={
name:PropTypes.string.isRequired,//限制name为字符串，必填
sex:PropTypes.string,
age:PropTypes.number,
speak:PropTypes.func//限制speak为函数
}
// 指定默认属性值
Person.defaultProps={
sex:'男',
age:14
}
class Person extends React.Component {
constructor(props) {
super(props)
console.log(props)
}
render() {
console.log(this)
// props是只读的
return (
<ul>
<li>姓名：{this.props.name}</li>
<li>年龄：{this.props.age}</li>
<li>性别：{this.props.sex}</li>
</ul>
);
}
// 对标签属性进行类型、必要性限制
static propTypes = {
name: PropTypes.string.isRequired,//限制name为字符串，必填
sex: PropTypes.string,
age: PropTypes.number,
}
// 指定默认属性值
static defaultProps = {
sex: '男',
age: 14
}
}
const p = { name: "tom" }
ReactDOM.render(<Person {...p} />, document.getElementById("test"));3、refs
1、字符串形式
<input ref="input1" type="text" placeholder="点击按钮提示数据" />
//获取数据
this.refs.input1.value2、回调形式
<input ref={c => { this.input1 = c }} type="text" placeholder="点击按钮提示数据" />
//获取数据
this.input1.value3、createRef的使用
// react.createRef被调用后，会返回一个容器，该容器可以存储被Ref标识的节点,该容器专人专用
myRef = React.createRef()
<input ref={this.myRef} type="text" placeholder="点击按钮提示数据" />
//获取数据
this.myRef.current.value
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。