示例完结

src/routers/index.js

@@ -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>
         )

src/views/AddPage.js

+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

src/views/IndexPage.js

+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

src/views/hello/ListItem.js

+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

src/views/hello/index.js

 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>)
     }
 

src/views/hello/index.less

+.opitem{
+    margin-left: 1em;
+}
+.timetext{
+    font-size: 1.2em;
+    color:#FF3355;
+}

src/views/selectPage/index.js

+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