非受控组件
受控组件和非受控组件的区别 ----- value
import React, { Component } from 'react'
export default class extends Component {
constructor (props) {
super(props);
this.state = {
username: '吴大勋',
password: '123465'
}
}
render () {
return (
<div>
<h1>非受控组件</h1>
<input type="text" defaultValue = { this.state.username} ref="username" onChange={ () => {
if(this.refs.username.value.length < 6) {
console.log('111111111')
} else {
console.log('ok')
}
this.setState({
username: this.refs.username.value
})
}}/>
<input type="password" defaultValue = { this.state.password} ref="password" onChange={ () => {
this.setState({
password: this.refs.password.value
})
}}/>
<input type="file" ref="file" multiple/>
<button onClick= { () => {
console.log(this.refs.username.value)
console.log(this.refs.password.value)
// .files可以获取文件的信息
/**
* lastModified: 1572398893933
lastModifiedDate: Wed Oct 30 2019 09:28:13 GMT+0800 (中国标准时间) {}
name: "2.png"
size: 24396
type: "image/png"
webkitRelativePath: ""
*/
console.log(this.refs.file.files)
} }>获取表单信息</button>
</div>
)
}
}
高阶组件
高阶组件其实就是一个纯函数，接收一个组件作为参数，返回一个新的组件
高阶组件1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body> </body>
<script src="test.js"></script>
<script> </script>
</html>
function welcome(){
}
function goodbye(){
}
// 高阶函数
function func (fn) { // fn为一个参数
return function () {
let username = localStorage.getItem('username');
console.log(username)
}
}
welcomeFn = func(welcome)
goodbyeFn = func(goodbye)
// console.log(welcomeFn)
goodbyeFn()
goodbyeFn()
高阶组件2
import React, { Component } from 'react'
import Welcome from './Welcome'
import Goodbye from './Goodbye'
export default class extends Component {
constructor (props) {
super(props);
}
render () {
return (
<div>
<h1>高阶组件</h1>
<Welcome />
<Goodbye />
</div>
)
}
}
welcome.js
import React, {Component} from 'react'
class Com extends Component {
constructor (props) {
super(props)
this.state = {
username: ''
}
}
componentDidMount () {
let username = localStorage.getItem('username')
this.setState({
username
})
}
render () {
return (
<div>
welcome { this.state.username }
</div>
)
}
}
export default Com
goodbye.js
import React, {Component} from 'react'
class Com extends Component {
constructor (props) {
super(props)
this.state = {
username: ''
}
}
componentDidMount () {
let username = localStorage.getItem('username')
this.setState({
username
})
}
render () {
return (
<div>
goodbye { this.state.username }
</div>
)
}
}
export default Com
简化高阶组件3
import React, { Component } from 'react'
import Welcome from './Welcome'
import Goodbye from './Goodbye'
export default class extends Component {
constructor (props) {
super(props);
}
render () {
return (
<div>
<h1>高阶组件</h1>
<Welcome />
<Goodbye />
</div>
)
}
}
welcome.js
import React, {Component} from 'react'
import higherorderfn from './higherorderfn'
// console.log(higherorderfn)
class Com extends Component {
render () {
return (
<div>
welcome ---- { this.props.username }
</div>
)
}
}
const NewCom = higherorderfn(Com)
export default NewCom
goodbye.js
import React, {Component} from 'react'
import higherorderfn from './higherorderfn'
// console.log(higherorderfn)
class Com extends Component {
render () {
return (
<div>
goodbye --- { this.props.username }
</div>
)
}
}
const NewCom = higherorderfn(Com)
export default NewCom
higherorderfn.js
import React, {Component} from 'react'
import higherorderfn from './higherorderfn'
// console.log(higherorderfn)
class Com extends Component {
render () {
return (
<div>
goodbye --- { this.props.username }
</div>
)
}
}
const NewCom = higherorderfn(Com)
export default NewCom
