React 基础回顾 03 表单和路由

表单

React 中有两种类型的表单：

• 受控表单
• 非受控表单

受控表单

表单空间中的值由组件的 state 对象来管理，state 对象中存储的值和表单空间中的值是同步状态的。

class App extends React.Component {
  constructor() {
    super()
    this.state = { username: '' }
    this.nameChanged = this.nameChanged.bind(this)
  }
  
  nameChanged(e) {
    this.setState({
      username: e.target.value
    })
  }
  render() {
    return (
    	<form>
      	<p>{this.state.username}</p>
        <input type="text" value={this.state.username} onInput={this.nameChanged} />
      </form>
    )
  }
}

非受控表单

表单元素的值由 DOM 元素本身管理。

class App extends React.Component {
  constructor() {
    super()
    this.onSubmit = this.onSubmit.bind(this)
  }
  
  onSubmit(e) {
    // 通过ref获取DOM元素的数据
    console.log(this.username.value)
    e.preventDefault()
  }
  render() {
    return (
    	<form onSubmit={this.onSubmit}>
        <input type="text" ref={username => this.username = username} />
      </form>
    )
  }
}

路由

URL 地址与组件之间的对应关系，访问不同的 URL 地址显示不同的组件。

# 安装
npm install react-router-dom

路由基本使用

• BrowserRouter 路由组件使用 HTML5 的 History API 修改路由 URL。
• Router 组件应放在应用程序的最外层
• Route 组件用来设置和匹配路由规则
  • path 匹配的路由路径
  • component 匹配的路由组件
• Link 组件用来设置路由链接
  • to 定义链接地址

// App.js
import React from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

function Index() {
  return <div>首页</div>
}

function News() {
  return <div>新闻</div>
}

function App() {
  return (
    <Router>
			<div>
        <Link to="/index">首页</Link>
        <Link to="/news">新闻</Link>
      </div>
      <div>
      	<Route path="/index" component={Index} />
      	<Route path="/news" component={News} />
      </div>
    </Router>
  )
}

路由嵌套

• props.match.url 获取当前组件真实的URL
• props.match.path 获取当前组件的路由路径

当通过路由传递参数时，可以明显看到两者的区别，例如 params.id=10时：

• props.match.url 可能是 /news/detail/10
• props.match.path 可能是 /news/detail/:id

function News(props) {
  return (
  	<div>
    	<div>
      	<Link to={`${props.match.url}/company`}>公司新闻</Link>
      	<Link to={`${props.match.url}/industry`}>行业新闻</Link>
      </div>
      <div>
      	<Route path={`${props.match.path}/company`} component={CompanyNews} />
      	<Route path={`${props.match.path}/industry`} component={IndustryNews} />
      </div>
    </div>
  )
}

function CompanyNews() {
  return <div>公司新闻</div>
}
function IndustryNews() {
  return <div>行业新闻</div>
}

路由传参

class News extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      list: [{
        id: 1,
        title: '新闻1'
      }, {
        id: 2,
        title: '新闻2'
      }]
    }
  }
  
  render() {
    return (
    	<div>
      	<div>新闻列表组件</div>
        <ul>
          {this.state.list.map(item => {
            return (
            	<li key={item.id}>
              	<Link to={`/detail?id=${item.id}`}>{item.title}</Link>
              </li>
            )
          })}
        </ul>
      </div>
    )
  }
}

class Detail extends React.Component {
  render() {
    const url = new URLSearchParams(this.props.location.search)
    
    return <div>新闻ID：{url。get('id')}</div>
  }
}

路由重定向

import { Redirect } from 'react-router-dom'
class Login extends React.Component {
  render() {
    if (this.state.isLogin) {
      return <Redirect to="/" />
    }
  }
}