表单
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
获取当前组件真实的URLprops.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="/" />
}
}
}