reactjs：map或filter，鉤子函數(shù)，setState，antd網(wǎng)址，下拉框默認(rèn)選中【詩(shī)書畫唱】
目錄：
antd（Ant Design）的訪問(wèn)路徑
下載http和url路徑的cmd命令
例子
使用map方法的更簡(jiǎn)潔方法
下拉框默認(rèn)選中.html
<MyOption? key={o.id}?cname={o.name} cid={o.id}? ?selected={o.name=='湘潭'?'selected':''}/>?
下拉框默認(rèn)選中2.html
map處理數(shù)組以及列表.html
map和filter方法.html
setState方法.html
組件的生命周期函數(shù)（鉤子函數(shù)）.html
map拼接列表.html
使用setState方法點(diǎn)擊文本后發(fā)生數(shù)字累加.html
用map或filter生成新數(shù)組.html
用鉤子函數(shù)實(shí)現(xiàn)放大文字的方法.html
1、在REACTJS中創(chuàng)建一個(gè)學(xué)歷下拉框組件.html
2、在REACTJS中創(chuàng)建一個(gè)省份下拉框組件.html
3.實(shí)現(xiàn)當(dāng)點(diǎn)擊按鈕時(shí)，頁(yè)面上的div中的字體越變?cè)酱蟮男Ч?html
MyTable.js
index.js
antd（Ant Design）的訪問(wèn)路徑
https://ant.design/components/overview-cn/
下載http和url路徑的cmd命令
npm?install?http?-g
npm?install?url?-g
例子
使用map方法的更簡(jiǎn)潔方法
下拉框默認(rèn)選中.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>
</head>
<body>
<div id="myDiv"></div>
<!--<select >
<option value="1">點(diǎn)贊</option>
<option value="2">收藏</option>
</select>-->
<script type="text/babel">
//1、下拉框默認(rèn)選中
class MyOption extends React.Component{
constructor(props){
super(props);
}
render() {
return <option value={this.props.cid}? selected={this.props.selected} >{this.props.cname}</option>
}
}
class MySel extends React.Component{
constructor(props){
super(props);
}
render() {
?const cityArr = [{id:1,name:'長(zhǎng)沙'},{id:2,name:'湘潭'},{id:3,name:'株洲'}];
? //補(bǔ)全代碼:設(shè)置湘潭為默認(rèn)選中
const cityItems =cityArr.map(o =>(
<MyOption? key={o.id}
? ? ? ? ? ? cname={o.name} cid={o.id}? ?selected={o.name=='湘潭'?'selected':''}/>? )? );
?
//? ? o.id==2?<MyOption? key={o.id}
//? ? ? ? ? cname={o.name} cid={o.id}? selected="selected" /> :
// <MyOption? key={o.id}
// cname={o.name} cid={o.id}? />?
//? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? )? );
return (<select >{cityItems}</select>);
}
}
ReactDOM.render(< MySel />,document.getElementById('myDiv'));
// MyOption.defaultProps = {
// selected:"selected";
// };
// selected="selected"
//cityArr[1].push="selected";
//document.getElementsByTagName("option")[1];
//console.log(document.getElementsByTagName("option")[0])??
//console.log(<select? >{cityItems}</select>)
// console.log(<MyOption/> )
//var a=document.getElementsByTagName("option");
//console.log( [...a]);
//console.log(document.getElementById('湘潭'))
</script>
</body>
</html>
<MyOption? key={o.id} cname={o.name} cid={o.id}? ?selected={o.name=='湘潭'?'selected':''}/>?
? ? ? ? ? ? cname={o.name} cid={o.id} ? selected={o.name=='湘潭'?'selected':''}/>
<!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>
<body>
<div id="myDiv"></div>
<script type="text/babel">
//1、下拉框默認(rèn)選中
class MySel extends React.Component{
constructor(props){
super(props);
}
render() {
?const cityArr = [{id:1,name:'長(zhǎng)沙'},{id:2,name:'湘潭'},{id:3,name:'株洲'}];
? //補(bǔ)全代碼:設(shè)置湘潭為默認(rèn)選中
const cityItems =cityArr.map(o =>(
<option key={o.id}? selected={o.name=='湘潭'?'selected':''}>{o.name}</option>
? ? ?)? );
return (<select >{cityItems}</select>);
}
}
ReactDOM.render(< MySel />,document.getElementById('myDiv'));
// MyOption.defaultProps = {
// selected:"selected";
// };
// selected="selected"
//cityArr[1].push="selected";
//document.getElementsByTagName("option")[1];
//console.log(document.getElementsByTagName("option")[0])??
//console.log(<select? >{cityItems}</select>)
// console.log(<MyOption/> )
//var a=document.getElementsByTagName("option");
//console.log( [...a]);
//console.log(document.getElementById('湘潭'))
</script>
</body>
</html>
map處理數(shù)組以及列表.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">
// const data = ['紅樓夢(mèng)','水滸傳','三國(guó)演義','西游記'];
// const books = data.map(b => <li key=>《》</li>);
// ReactDOM.render(<ul>{books}</ul>,
// document.getElementById('app'));
//? ? ? ? ? const pros = [
//? ? ? ? ? ? ? {id: 1,pname: '巧克力',price: 8.5},
//? ? ? ? ? ? ? {id: 4,pname: '辣條',price: 3.5},
//? ? ? ? ? ? ? {id: 6,pname: '爆米花',price: 12}
//? ? ? ? ? ];
//? ? ? ? ? const proItems = pros.map(p => <tr key={p.id}>
//? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<td>{p.id}</td>
//? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<td>{p.pname}</td>
//? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<td>￥{p.price}</td>
//? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?</tr>);
//? ? ? ? ? ReactDOM.render(<table border="1"><tbody>{proItems}</tbody></table>,
//? ? ? ? ? ? ? document.getElementById('app'));
? ? ? ? ? ? class ProItem extends React.Component{
? ? ? ? ? ? render(){
? ? ? ? ? ? //不能在這里添加key屬性
? ? ? ? ? ? return (<tr>
? ? ? ? ? ? ? ? ? ? <td>{this.props.pro.id}</td>
? ? ? ? ? ? ? ? ? ? <td>{this.props.pro.pname}</td>
? ? ? ? ? ? ? ? ? ? <td>{this.props.pro.price}</td>
? ? ? ? ? ? ? ? ? ? </tr>);
? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? class ProList extends React.Component {
? ? ? ? ? ? render(){
? ? ? ? ? ? const pros = this.props.ps;
? ? ? ? ? ? const list = pros.map(p => <ProItem key={p.id} pro={p} />);
? ? ? ? ? ? return (<tbody>{list}</tbody>);
? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? const pros = [
? ? ? ? ? ? ? ? {id: 1,pname: '巧克力',price: 8.5},
? ? ? ? ? ? ? ? {id: 4,pname: '辣條',price: 3.5},
? ? ? ? ? ? ? ? {id: 6,pname: '爆米花',price: 12}
? ? ? ? ? ? ];
? ? ? ? ? ? ReactDOM.render(<table border="1"><ProList ps={pros} /></table>,
? ? ? ? ? ? ? ? document.getElementById('app'));
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
map和filter方法.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//map,filter
let arr = [3,4,7,11,2];
//產(chǎn)生一個(gè)新的數(shù)組，數(shù)組中的元素剛好是arr數(shù)組的元素的平方
// let ar1 = [];
// for(let i = 0;i < arr.length;i ++) {
// let num = arr[i];
// ar1[i] = num * num;?
// }
let ar1 = arr.map(num => num * num);
console.log(ar1);
// let ar2 = [];
// for(let i = 0;i < arr.length;i ++) {
// let num = arr[i];
// if(num % 2 == 1) {
// ar2.push(num);
// }
// }
//? ? ? ? ? let ar2 = arr.filter(function(num){
//? ? ? ? ? //這個(gè)函數(shù)返回值是true，則當(dāng)前的元素被保留到新數(shù)組中
//? ? ? ? ? //如果返回false，就不會(huì)被保留到新數(shù)組中
//? ? ? ? ? return num % 2 == 1;
//? ? ? ? ? });
? ? ? ? ? ? let ar2 = arr.filter(num => num % 2 == 1);
console.log(ar2);
//遍歷each
arr.forEach(num => console.log(num));
</script>
</head>
<body>
</body>
</html>
setState方法.html
組件的生命周期函數(shù)（鉤子函數(shù)）.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">
class MyTag extends React.Component {
constructor(){
super();
//設(shè)置組件的初始字體大小為20px
this.state = {
fontSize: '20px',
color: 'red'
};
}
//當(dāng)組件第一次加載到DOM中時(shí)，字體越變?cè)酱?/p>
componentDidMount(){
//每隔100毫秒就讓字體變大一點(diǎn)
this.iv = setInterval(() => {
let ft = this.state.fontSize;
ft = parseInt(ft) + 5 + 'px';
this.setState({
fontSize: ft
});
},100);
}
//當(dāng)組件被卸載的時(shí)候清除定時(shí)器
componentWillUnmount(){
if(this.iv) {
clearInterval(this.iv);
}
}
render(){
return (<div style={this.state}>{this.props.name}</div>);
}
}
ReactDOM.render(<MyTag name="中國(guó)" />,
? ? document.getElementById('app'));
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
map拼接列表.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">
class ZuJian extends React.Component{
? ? ? ? ? ? render(){
? ? ? ? ? ?
? ? ? ? ? ? return (<tr>
? ? ? ? ? ? ? ? ? ? <td>{this.props.pro.id}</td>
? ? ? ? ? ? ? ? ? ? <td>{this.props.pro.pname}</td>
? ? ? ? ? ? ? ? ? ? <td>{this.props.pro.price}</td>
? ? ? ? ? ? ? ? ? ? </tr>);
? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? class ZuJian2 extends React.Component {
? ? ? ? ? ? render(){
? ? ? ? ? ? const pros = this.props.ps;
? ? ? ? ? ? const list = pros.map(p => <ZuJian key={p.id} pro={p} />);
? ? ? ? ? ? return (<tbody>{list}</tbody>);
? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? const pros = [
? ? ? ? ? ? ? ? {id: 1,pname: '詩(shī)書畫唱',price: 7.7},
? ? ? ? ? ? ? ? {id: 2,pname: '三連',price: 8.8},
? ? ? ? ? ? ? ? {id: 3,pname: '關(guān)注',price: 9.9}
? ? ? ? ? ? ];
? ? ? ? ? ? ReactDOM.render(<table border="1"><ZuJian2 ps={pros} /></table>,
? ? ? ? ? ? ? ? document.getElementById('id2'));
</script>
</head>
<body>
<div id="id2"></div>
</body>
</html>
使用setState方法點(diǎn)擊文本后發(fā)生數(shù)字累加.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">
class ZuJian1 extends React.Component{
constructor(){
super();
this.state = {
num: 0
};
this.perform = this.perform.bind(this);
}
perform(){
let n = this.state.num;
n ++;
? ? ? ? ? ? ? ? ? ? this.setState(function(s){
? ? ? ? ? ? ? ? ? ? s.num = n;
? ? ? ? ? ? ? ? ? ? return s;
? ? ? ? ? ? ? ? ? ? });
}
render(){
return (<div onClick={this.perform} >{this.state.num}</div>);
}
}
ReactDOM.render(<ZuJian1 />,document.getElementById('id1'));
</script>
</head>
<body>
請(qǐng)點(diǎn)擊數(shù)字文本：
<div id="id1"></div>
</body>
</html>
用map或filter生成新數(shù)組.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//使用map方法生成新數(shù)組：
let arr = [7,6,9,8,10];
let arr1 = arr.map(num => num * num);
console.log(arr1);
//使用filter方法生成新數(shù)組：
let arr3 = [7,6,9,8,10];
? ? ? ? ? ? let arr2 = arr3.filter(num => num % 2 == 1);
console.log(arr2);
arr3.forEach(num => console.log(num));
</script>
</head>
<body>
</body>
</html>
用鉤子函數(shù)實(shí)現(xiàn)放大文字的方法.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">
class MyTag extends React.Component {
constructor(){
super();
this.state = {
fontSize: '6px',
color: 'blue'
};
}
componentDidMount(){
this.iv = setInterval(() => {
let ft = this.state.fontSize;
ft = parseInt(ft) + 5 + 'px';
this.setState({
fontSize: ft
});
},100);
}
componentWillUnmount(){
if(this.iv) {
clearInterval(this.iv);
}
}
render(){
return (<div style={this.state}>{this.props.name}</div>);
}
}
ReactDOM.render(<MyTag name="三連" />,
? ? document.getElementById('id1'));
</script>
</head>
<body>
<div id="id1"></div>
</body>
</html>
1、在REACTJS中創(chuàng)建一個(gè)學(xué)歷下拉框組件.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">
class ZuJian extends React.Component{
? ? ? ? ? ? render(){
return ( <option>{this.props.name}</option> );
? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? class ZuJian2 extends React.Component {
? ? ? ? ? ? render(){
? ? ? ? ? ? const arrObjectArr= this.props.arrObject;
? ? ? ? ? ? const data=arrObjectArr.map(o => <ZuJian key={o} name={o} />);
? ? ? ? ? ? return (<select>{data}</select>);
? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ??
? ? ? ? ? ? const arr = ["高中","大學(xué)"];
? ? ? ? ? ??
/*下面的 arrObject={arr} 中的{arr}是拆分解構(gòu)的過(guò)程，
一般看到{} 或[]就聯(lián)想到解構(gòu)? ?,[...arr]? ?這只是一種語(yǔ)法糖，
一種規(guī)定的語(yǔ)法*/
? ? ? ? ? ? ReactDOM.render(<ZuJian2 arrObject={arr} />,
? ? ? ? ? ? ? ? document.getElementById('id2'));
</script>
</head>
<body>
<div id="id2"></div>
</body>
</html>
2、在REACTJS中創(chuàng)建一個(gè)省份下拉框組件.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">
class ZuJian extends React.Component{
? ? ? ? ? ? render(){
return ( <option>{this.props.name}</option> );
? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? class ZuJian2 extends React.Component {
? ? ? ? ? ? render(){
? ? ? ? ? ? const arrObjectArr= this.props.arrObject;
? ? ? ? ? ? const data=arrObjectArr.map(o => <ZuJian key={o} name={o} />);
? ? ? ? ? ? return (<select>{data}</select>);
? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ??
? ? ? ? ? ? const arr = ["江西省","湖南省"];
? ? ? ? ? ??
? ? ? ? ? ? ReactDOM.render(<ZuJian2 arrObject={arr} />,
? ? ? ? ? ? ? ? document.getElementById('id2'));
</script>
</head>
<body>
<div id="id2"></div>
</body>
</html>
3.實(shí)現(xiàn)當(dāng)點(diǎn)擊按鈕時(shí)，頁(yè)面上的div中的字體越變?cè)酱蟮男Ч?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">
class MyTag extends React.Component {
constructor(){
super();
this.state = {
fontSize: '6px',
color: 'blue'
};
}
handleClick(){
this.iv = setInterval(() => {
let ft = this.state.fontSize;
ft = parseInt(ft) + 5 + 'px';
this.setState({
fontSize: ft
});
},100);
}
/*在打開網(wǎng)站頁(yè)面時(shí)自動(dòng)調(diào)用componentDidMount，
在關(guān)閉網(wǎng)站頁(yè)面時(shí)調(diào)用componentWillUnmount（防止setInterval一直運(yùn)行，內(nèi)存被占用）:*/
componentWillUnmount(){
if(this.iv) {
clearInterval(this.iv);
}
}
render(){
return (<div style={this.state}>{this.props.name}<input type="button" value="點(diǎn)擊按鈕"?
? ? ? ? ? ?onClick={this.handleClick.bind(this)} /></div> );
}
// handleClick(){
//alert("測(cè)試")
// }
}
ReactDOM.render(<MyTag name="三連" />,
? ? document.getElementById('id1'));
</script>
</head>
<body>
<div id="id1"></div>
</body>
</html>
MyTable.js
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import 'antd/dist/antd.css';
import MyTable from './comp/MyTable';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
? <React.StrictMode>
? ? <MyTable />
? </React.StrictMode>,
? document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
