React-RouterTest

var peoples = [{ id : 0, username: '锅锅', age: 30, sex: 'male', address: 'china' },
{ id : 1, username: '静静', age: 10, sex: 'female', address: 'china' },
{ id : 2, username: '桃子', age: 12, sex: 'female', address: 'china' },
{ id : 3, username: '宝宝', age: 2, sex: 'female', address: 'china' },
{ id : 4, username: '谢', age: 10, sex: 'male', address: 'china' },
{ id : 5, username: '严总', age: 40, sex: 'male', address: 'china' },
{ id : 6, username: '龚二', age: 20, sex: 'male', address: 'china' }];

// 标记是否选择修改的用户
const chooseOne = {
    isChoosen: false, // 标记是否选择
    index : 0, // 存放被选择的对象的下标
    users : peoples,
    toChoose(index) {
        this.isChoosen = true
        this.index = index
    },
    toEdit(user){
        this.users[this.index] = user
    },
    dropOut() {
        this.isChoosen = false
        this.user = null
    }
}

export default chooseOne

import React from 'react'
import chooseOne from './choose'

class All extends React.Component {
    handleClick(index) {
        alert(index)
        chooseOne.toChoose(index);
    }

    render() {
        let thiz = this

        return (
 
            
  
   UsePage
   { 
                chooseOne.users.map((user, index) => (
                    
  
   
     { thiz.handleClick(index) e.preventDefault() browserHistory.push('/see/one') }}> { Object.keys(user).map( (property) => 
     {user[property]} ) }
   )) }
  
 );
    }
}

export default All

import React from 'react'
import chooseOne from './choose'

class Edit extends React.Component{
    constructor (props){
        super(props)
        this.state = chooseOne.users[chooseOne.index]; // 状态初始值
    }
    
    handleChange (event){ // 输入新值
        let name = event.target.name;
        let value = event.target.value;
        // alert(name + ',' + value)
        this.setState({name : value})
    }

    handleClick(e){ // 点击确定
        let user = this.state;
        chooseOne.toEdit(user); // 改变数组
        e.preventDefault();
        const path = `/see/all`
        browserHistory.push(path)
    }

    render() {
        let thiz = this
        let user = chooseOne.users[chooseOne.index]
        if (!chooseOne.isChoosen) {
            return (
 
                
  
 未选择编辑用户
            
 )
        }

        return (
 
  {
                Object.keys(user).map((property) => (
   {property}: 

 ))
            }
            
  
     
  thiz.handleClick(e) }>确定
        
 );
    }   
}

export default Edit

import React from 'react'
import chooseOne from './choose'

const One = () => {
    let user = chooseOne.users[chooseOne.index]
    return chooseOne.isChoosen ? (
        
 
            
  

   { Object.keys(user).map( (property) => 
   
{property}:{user[property]}
 ) } 
  
            
  
     
  { e.preventDefault(); const path = `/edit` browserHistory.push(path) }}>编辑
        
 
    ) : (
            
 
                
  
 未选择显示用户
            
 
        )
}

export default One

import React from 'react'
import {
    BrowserRouter as Router,
    Route,
    Link,
    Redirect
} from 'react-router-dom'
import { browserHistory } from 'react-router'

import All from './All'
import One from './One'
import Edit from './Edit'

const See = ({routes}) => (
    
 
        
  
 
   

    所有用户
 
   

    单个用户
 
  
        {routes.map((route) => (
            
  
        ))}
    
 
)

const routes = [
    { path: '/see',
      exact: true,
      component: See,
      routes : [
          { path: '/see/all',
            component: All
          },
          { path: '/see/one',
            component: One
          }
      ]
    },

    { path: '/edit',
      component: Edit
    }
]

const RouteIn = (route) => (
    
 
   (
        
    
    )} />
)

const Test = () => (
    
   
    
     
     
 
      

       查看
 {/* 表示绝对匹配 */} 
      

       编辑用户
 
     
 
     
    
      {routes.map((route) => ( 
      ))} 
     
    
  
)

export default Test
 

import React from 'react'
import ReactDOM from 'react-dom'

// import HomePage from './HomePage'

// ReactDOM.render(, document.getElementById('usepage'));


// import BasicExample from './BasicExample'

// ReactDOM.render(, document.getElementById('usepage'));

// import AuthExample from './AuthExample'

// ReactDOM.render(, document.getElementById('usepage'));


// import RecursiveExample from './RecursiveExample'

// ReactDOM.render(, document.getElementById('usepage'))


// import SidebarExample from './SidebarExample'

// ReactDOM.render(, document.getElementById('usepage'))


import Test from './router'

ReactDOM.render(, document.getElementById('usepage'))