Commit 8513aa97 by fukai

示例完结

parent c1589258
......@@ -3,7 +3,9 @@ import { HashRouter as Router,Switch, Route, Redirect } from 'react-router-dom';
import Hello from '../views/hello'
import Test01 from '../views/test01'
import SelectPage from '../views/selectPage'
import Index from "../views/IndexPage"
import AddPage from "../views/AddPage"
export default class AppRouter extends Component{
......@@ -11,9 +13,11 @@ export default class AppRouter extends Component{
return (
<Router>
<div>
<Route path="/" exact component={Hello} />
<Route path="/" exact component={Index} />
<Route path="/hello" component={Hello} />
<Route path="/test01" component={Test01} />
<Route path="/select" component={SelectPage} />
<Route path="/add" component={AddPage} />
</div>
</Router>
)
......
import React,{Component} from 'react'
import { Row, Col,Input,Table,Button,Divider,Tag } from 'antd'
export default class AddPage extends Component
{
state={nam:"",tel:"",dataList:[]}
columns = [
{
title: 'Name',
dataIndex: 'nam',
key: 'nam',
render: text => <a>{text}</a>,
},
{
title: 'Tel',
dataIndex: 'tel',
key: 'tel',
},
{
title: '操作',
dataIndex: '',
key: 'op',
render:(val,row,index)=>{
return <a href="javascript:void(0)" onClick={()=>{
let {dataList} = this.state;
dataList.splice(index,1);
this.setState({dataList})
}}>删除</a>
}
},
];
addData=()=>{
let {nam,tel,dataList} = this.state
dataList.push({nam,tel})
this.setState({dataList})
}
calcRedNumber(){
let cnt = this.state.dataList.length;
if(cnt > 26)
return 255
else
return cnt *10
}
render(){
let redCnt = this.calcRedNumber();
let redStr = `rgb(${redCnt},0,0)`
let redStyleObj = {color:redStr};
return (
<div>
<Row style={{marginTop:'2em'}}>
<Col span={8} offset={1}>
<Input placeholder="输入姓名" onChange={e=>this.setState({nam:e.target.value})} value={this.state.nam}/>
</Col>
<Col span={8} offset={1}>
<Input placeholder="输入电话" onChange={e=>this.setState({tel:e.target.value})} value={this.state.tel}/>
</Col>
<Col span={5} offset={1}>
{
this.state.dataList.length >= 26 ? null:
<Button style={redStyleObj} icon="plus" onClick={this.addData}>添加</Button>
}
</Col>
</Row>
<Row style={{marginTop:'2em'}}>
<Col offset={1} span={22}>
<Table columns={this.columns} dataSource={this.state.dataList} />
</Col>
</Row>
</div>
)
}
}
\ No newline at end of file
import React,{Component} from 'react'
import {Link} from 'react-router-dom'
export default function(){
return (
<div>
<ul>
<li><Link to="hello">Hello</Link></li>
<li><Link to="select">SelectPage</Link></li>
<li><Link to="add">AddPage</Link></li>
<li><Link to="test01">Test01</Link></li>
</ul>
</div>
)
}
\ No newline at end of file
import React,{Component} from 'react'
export default class ListItem extends Component
{
render()
{
const {item} = this.props
// const item = this.props.item
return ( <p>
<span className="timetext"> {item.timestamp} </span>
<a className="opitem" href="javascript:void(0)" onClick={this.props.onRemoveData}>删除</a>
</p>
)
}
}
export function ListItem2(props)
{
const {item} = props
return ( <p>
<span className="timetext"> {item.timestamp} </span>
<a className="opitem" href="javascript:void(0)" onClick={props.onRemoveData}>删除</a>
</p>
)
}
\ No newline at end of file
import React,{Component} from 'react'
import {Link} from 'react-router-dom';
import './index.less'
import ListItem,{ListItem2} from './ListItem'
export default class Hello extends Component{
constructor(props)
{
super(props)
this.state={data:[]}
}
pushData=function ()
{
var data = this.state.data
var item = {timestamp:new Date() - 0}
data.push(item)
this.setState({data})
//this.setState({data:data})
}
pushData2=function(){
this.pushData()
}.bind(this)
pushData2=()=>{
this.pushData()
}
removeData=(index)=>{
var data = this.state.data
data.splice(index,1)
this.setState({data})
}
render()
{
return (<div>
<h1>hello,开始我们的React课程吧!</h1>
<Link to="test01" >go test01</Link>
<div>
<a className="opitem" href="javascript:void(0)" onClick={this.pushData.bind(this)}>添加</a>
</div>
<div>
{
this.state.data.map((item,index)=>{
return (
<ListItem2 item={item} onRemoveData={()=>this.removeData(index)} />
)
})
}
</div>
</div>)
}
......
.opitem{
margin-left: 1em;
}
.timetext{
font-size: 1.2em;
color:#FF3355;
}
import React,{Component} from 'react'
import { Row, Col,Input,Table,Button,Divider,Tag } from 'antd'
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
render: text => <a>{text}</a>,
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
{
title: 'Tags',
key: 'tags',
dataIndex: 'tags',
render: tags => (
<span>
{tags.map(tag => {
let color = tag.length > 5 ? 'geekblue' : 'green';
if (tag === 'loser') {
color = 'volcano';
}
return (
<Tag color={color} key={tag}>
{tag.toUpperCase()}
</Tag>
);
})}
</span>
),
},
{
title: 'Action',
key: 'action',
render: (text, record) => (
<span>
<a>Invite {record.name}</a>
<Divider type="vertical" />
<a>Delete</a>
</span>
),
},
];
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
tags: ['nice', 'developer'],
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
tags: ['loser'],
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
tags: ['cool', 'teacher'],
},
];
export default class select extends Component
{
render(){
return (
<div>
<Row style={{marginTop:'2em'}}>
<Col span={8} offset={1}>
<Input placeholder="输入姓名查询" />
</Col>
<Col span={8} offset={1}>
<Input placeholder="输入电话查询" />
</Col>
<Col span={5} offset={1}>
<Button icon="search">Search</Button>
</Col>
</Row>
<Row style={{marginTop:'2em'}}>
<Col offset={1} span={22}>
<Table columns={columns} dataSource={data} />
</Col>
</Row>
</div>
)
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment