React绑定事件，flag等解决setInterval重复调用ref渐变，随机点名，换色【诗书画唱】
目录：
讲义
看教程视频后记录的个人理解等等
例子
props.children属性.html
props和state组合使用：默认选中的单选框.html
ref的使用方法：绑定点击事件添加文本.html
布尔型的使用：隐藏或显示登录等的组件.html
组件的属性.html
1、使用reactjs实现div的背景颜色渐变效果rgb(255,255,255).html
2、完整实现随机点名器功能，添加继续和停止按钮功能。.html
1、使用reactjs实现div的背景颜色渐变效果rgb(255,255,255)
2、完整实现随机点名器功能，添加继续和停止按钮功能。
用flag解决setInterval重复调用的问题
随机点名.html
用在调用 setInterval前写出if(this.iv) {clearInterval(this.iv);}的方法来解决 setInterval方法重复调用后停不下来的问题
自动切换背景颜色.html
注释的位置可能影响代码的运行，如果注释的位置不正确就会报错等等。
个人理解：同时componentDidMount中的内容会在打开网页的时候执行，componentWillUnmount中的内容会在关闭网页的时候执行，我下面声明的componentWillUnmount中的if(this.iv) {clearInterval(this.iv);}内容可以网页关闭时，关闭setInterval，防止setInterval没关闭，占内存等等。
个人想法：我认为“渐变效果”是很好的设计效果，以后我可能常用。
讲义
一、自定义组件的三种方法
二、设置组件属性的默认值
三、单选框和多选框的默认选中设置
四、下拉框
五、...扩展运算符
Reactjs的组件：将一系列的Html或者组件封装成一个自定义的标签
<ul><li>语文</li><li>数学</li><li>英语</li></ul>
<MyLabel abc="[语文，数学，英语]"/>
看教程视频后记录的个人理解等等
双倍子标签（自己定义的子组件）——>
这样才没有写死——>
setState用来刷新组件——>
个人理解：children属性就是被去标签夹住的内容——>
this.props.children就是一个数组——>
HTML的很多常用的内容都可以写成子组件，要用的时候调用组件就可以了（调用组件的时候就像是在调用自定义的HTML标签），比如登录，注册可以写成登录，注册组件后调用，个人认为这个“组件化”就是封装后调用，减少重复代码——>
类似于id=XXX的ref=XXX，类似于document.getElementById（XXX）的this.refs.XXX的例子说明——>
例子
props.children属性.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/react.js" ></script>
<script type="text/javascript" srcc="js/react-dom.js" ></script>
<script type="text/javascript" srcc="js/browser.js" ></script>
<script type="text/babel">
/*例子1 START：先定义了一个MyTag组件 （有时可以理解为"标签" ，
{this.props.children}是用来显示在 ReactDOM.render中的<MyTag></MyTag>标签之间的内容，
即children属性可以理解为标签内部的html内容——>*/
class MyTag extends React.Component{
render(){
return (<strong>
{this.props.children},{this.props.name}
</strong>);
}
}
ReactDOM.render(<MyTag name="张三">你好</MyTag>,
document.getElementById('app1'));
//例子1 END
/*例子2 START ——> 个人理解：this.props.children是一个由元素组成的数组
,这里的this.props.children[1]就是"科目表 "这个文本，
this.props.children[1]表示父标签（标签和文本等等有时可以理解为元素）下
的<ul>和其下面的所有子标签<li>的内容。 ——>",
*/
class Content extends React.Component {
render(){
return (<h1>
{this.props.children[0]}
<div>{this.props.children[1]}</div>
</h1>);
}
}
class Subject extends React.Component{
render(){
return (<ul>{this.props.children}</ul>);
}
}
ReactDOM.render(<Content>科目表
<ul><li>语文</li><li>数学</li><li>英语</li></ul>
</Content>,document.getElementById('app2'));
//例子2 END
/*例子3 START：组合使用2个组件的this.props.children来显示"语文"的文字为斜体，
数学为粗体：*/
class Tag1 extends React.Component{
render(){
return (<li><em>{this.props.children}</em></li>);
}
}
class Tag2 extends React.Component{
render(){
return (<li><strong>{this.props.children}</strong></li>);
}
}
ReactDOM.render(<Subject><Tag1>语文</Tag1><Tag2>数学</Tag2></Subject>,document.getElementById('app3'));
//例子3 END
</script>
</head>
<body>
例子1：
<div id="app1"></div>
例子2：
<div id="app2"></div>
例子3：
<div id="app3"></div>
</body>
</html>
props和state组合使用：默认选中的单选框.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/react.js" ></script>
<script type="text/javascript" srcc="js/react-dom.js" ></script>
<script type="text/javascript" srcc="js/browser.js" ></script>
<script type="text/babel">
//1.先声明Name子组件：
class Name extends React.Component{
render(){
return <div><input type="text" value={this.props.name} /></div>;
}
}
//2.声明Age子组件：
class Age extends React.Component{
render(){
return <div><label>年龄是:{this.props.age}</label></div>;
}
}
//3.声明sex子组件：
class sex extends React.Component{
render(){
return (<div>
<input type="radio" value="男"
checked={this.props.sex === '男' ? true : false} />男
<input type="radio" value="女"
checked={this.props.sex === '女' ? true : false} />女
</div>);
}
}
/*4.声明在return时用了Name，Age，sex这3个子组件的Stu父组件。
Stu父组件包括：含super和this.state的constructor构造方法，
可以return多个子组件内容的render()方法。
重要内容：刷新组件中的内容只能使用setState才能实现。
*/
class Stu extends React.Component{
constructor(){
super();
this.state = {
sname: 'Kite',
sage: 21,
ssex: '女'
}
}
render(){
return (<div>
<Name name={this.props.sname} />
<Age age={this.props.sage} />
<sex sex={this.props.ssex} />
</div>);
}
}
ReactDOM.render(<Stu sname="诗书画唱" sage="19" ssex='男' />,document.getElementById('app'));
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
ref的使用方法：绑定点击事件添加文本.html
布尔型的使用：隐藏或显示登录等的组件.html
组件的属性.html
1、使用reactjs实现div的背景颜色渐变效果rgb(255,255,255)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<script type="text/javascript" srcc="js/react.js" ></script>
<script type="text/javascript" srcc="js/react-dom.js" ></script>
<script type="text/javascript" srcc="js/browser.js" ></script>
</head>
<style>
#id2 {
background-image: linear-gradient(to right, RGB(255,255,255) , RGB(0,255,255))
}
</style>
<body>
<div id="example" ></div>
<script type="text/babel">
var myStyle = {
backgroundColor:'red',
fontSize:40,
height:100,width:500,
};
class ZuJianName extends React.Component{
render(){
return <div style = {myStyle} id="id2" >渐变效果</div>;
}
}
ReactDOM.render(<ZuJianName />,
document.getElementById('example')
);
</script>
</body>
</html>
2、完整实现随机点名器功能，添加继续和停止按钮功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/react.js" ></script>
<script type="text/javascript" srcc="js/react-dom.js" ></script>
<script type="text/javascript" srcc="js/browser.js" ></script>
<script type="text/babel">
class ZuJian extends React.Component{
//constructor是组件的构造方法：
constructor(){
//super可以调用父类的构造方法：
super();
//用this.state添加一个状态：
this.state = {
num:0,
arr: ["诗书画唱","三连","点赞","投币","关注"]
};
}
//生命周期函数也叫钩子函数。
//当组件挂载以后调用这个函数:
componentDidMount(){
//箭头函数内部的this和外部函数的this指向同一个对象：
this.iv = setInterval(() => {
//必须调用setState方法才能使组件刷新：
this.setState({
/*这里的this.state.arr.length-1用上random生成0到数组长度减1的随机数后,
就实现了随机点名器,界面自己可以再设计,美化:*/
num: this.state.num==this.state.arr.length-1?this.state.num=0:++ this.state.num
});
},7);
}
//当组件被卸载时调用：
componentWillUnmount(){
//同时清除setInterval函数：
//如果this.iv有值时执行clearInterval(this.iv);
if(this.iv) {
clearInterval(this.iv);
}
}
render(){
return (<div><input type="button" value="停止"
onClick={this.Click1.bind(this)} />
<input type="button" value="继续"
onClick={this.Click2.bind(this)} />
<h1>显示的名字:</h1>
<h2> {this.state.arr[this.state.num]}</h2>
</div>);
}
Click1(){
clearInterval(this.iv);
}
Click2(){
/*解决setInterval停不下来的问题 START：
每次多调用的this.iv就先清除掉后再调用就
不会出现多次调用this.iv后停不下来的问题*/
if( this.iv!=null){//判断计时器是否为空
clearInterval(this.iv);
this.iv=null;
}
// 解决setInterval停不下来的问题 END
this.iv = setInterval(() => {
this.setState({
num: this.state.num==this.state.arr.length-1?this.state.num=0:++ this.state.num
});
},7);
}
}
//通过ReactDOM.render的<ZuJian />来挂载ZuJian这个组件后会自动执行componentDidMount中的内容:
ReactDOM.render(<ZuJian />,
document.getElementById('app'));
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
用flag解决setInterval重复调用的问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var nameArr=['诗书画唱虎','诗书画唱蛇','诗书画唱兔','诗书画唱猴','诗书画唱牛','诗书画唱鼠','诗书画唱马','诗书画唱車'];
var iv=null;
var flag=true;
function doStart(){
nameArr.sort(
function(){
return 0.5-Math.random();
}
);
var i=0;
if(flag){
iv=setInterval(
function(){
document.getElementById("nameDiv").innerHTML=nameArr[i];
i++;
if(i>=nameArr.length){
i=0;
}
}
,10);
flag=false;
}
}
function doStop(){
clearInterval(iv)
flag=true;
}
</script>
</head>
<body>
<table width="100%">
<tr>
<td align="center">
<input type="button" value="开始" onclick="doStart();"/>
<input type="button" value="就是你" onclick="doStop();"/>
</td>
</tr>
<tr>
<td align="center">
<div id="nameDiv" style="font-size:80px;">姓名</div>
</td>
</tr>
</table>
</body>
</html>
用在调用 setInterval前写出if(this.iv) {clearInterval(this.iv);}的方法来解决 setInterval方法重复调用后停不下来的问题
自动切换背景颜色.html
注释的位置可能影响代码的运行，如果注释的位置不正确就会报错等等。
个人理解：同时componentDidMount中的内容会在打开网页的时候执行，componentWillUnmount中的内容会在关闭网页的时候执行，我下面声明的componentWillUnmount中的if(this.iv) {clearInterval(this.iv);}内容可以网页关闭时关闭setInterval，防止setInterval没关闭，占内存等等。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/react.js" ></script>
<script type="text/javascript" srcc="js/react-dom.js" ></script>
<script type="text/javascript" srcc="js/browser.js" ></script>
<script type="text/babel">
class ZuJian extends React.Component{
constructor(){
super();
this.state = {
num:0,
arr: ["blue","yellow","red","black","green"]
};
}
componentDidMount(){
this.iv = setInterval(() => {
this.setState({
num: this.state.num==this.state.arr.length-1?this.state.num=0:++ this.state.num
});
},7);
}
componentWillUnmount(){
if(this.iv) {
clearInterval(this.iv);
}
}
/*这里的style={myStyle}，其实用了{}就是解构的过程而style={ {
backgroundColor: this.state.arr[this.state.num]}
}也是解构以{}声明*//*里面的blue等等也可以写成rgb的格式，比如rgb(25,25,25)*/
render(){
var myStyle = {
backgroundColor: this.state.arr[this.state.num],
height:100,
width:500
};
return (<div><input type="button" value="停止"
onClick={this.Click1.bind(this)} />
<input type="button" value="继续"
onClick={this.Click2.bind(this)} />
<h1>自动切换的颜色:</h1>
<div style={myStyle}></div>
</div>);
}
Click1(){
clearInterval(this.iv);
}
Click2(){
if( this.iv!=null){
clearInterval(this.iv);
this.iv=null;
}
this.iv = setInterval(() => {
this.setState({
num: this.state.num==this.state.arr.length-1?this.state.num=0:++ this.state.num
});
},7);
}
}
ReactDOM.render(<ZuJian />,
document.getElementById('app'));
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
