目录
受控组件：输入类的DOM，随着输入，将输入内容维护到状态中，要用再取
二、高阶函数（“函数即值”，函数可以被赋值给变量或传递给另一个函数）
2.1.1 filter（filter接收另一个函数作为参数）
一、受控组件与非受控组件
-
受控组件：输入类的DOM，随着输入，将输入内容维护到状态中，要用再取
-
表单数据由 React 组件的 state 管理
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>受控组件</title>
</head>
<body>
<div id="test">
</div>
<script src="../js/16.8.4/react.development.js"></script>
<script src="../js/16.8.4/react-dom.development.js"></script>
<script src="../js/16.8.4/babel.min.js"></script>
<script type="text/babel">
class Login extends React.Component {
state = {
username: '',
password: ''
}
//输入类的DOM，随着输入，将输入内容维护到状态中，要用时再取出来
// 保存用户名到状态
setUser = (event) => {
this.setState({
username: event.target.value
})
}
setPwd = (event) => {
this.setState({
password: event.target.value
})
}
//表单提交的回调
handel = (event) => {
event.preventDefault()//阻止表单提交
const { username, password } = this.state
alert(`用户名:${username},密码：${password}`)
}
render () {
return (
<form action="https://www.baidu.com/" onSubmit={this.handel}>
用户名：<input type="text" name="username" onChange={this.setUser} />
密码：<input type="password" name="password" onChange={this.setPwd} />
<button>登录</button>
</form>
)
}
}
ReactDOM.render(<Login />, document.getElementById('test'))
</script>
</body>
</html>-
非受控组件：输入类DOM，自己保存状态，现用现取
-
表单数据交由 DOM 节点处理
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>非受控组件</title>
</head>
<body>
<div id="test">
</div>
<script src="../js/16.8.4/react.development.js"></script>
<script src="../js/16.8.4/react-dom.development.js"></script>
<script src="../js/16.8.4/babel.min.js"></script>
<script type="text/babel">
class Login extends React.Component {
handel = (event) => {
event.preventDefault()//阻止表单提交
const { username, password } = this
//输入类DOM，现用现取，就是非受控组件
alert(`用户名:${username.value},密码：${password.value}`)
}
render () {
return (
<form action="https://www.baidu.com/" onSubmit={this.handel}>
用户名：<input type="text" name="username" ref={c => this.username = c} />
密码：<input type="password" name="password" ref={c => this.password = c} />
<button>登录</button>
</form>
)
}
}
ReactDOM.render(<Login />, document.getElementById('test'))
</script>
</body>
</html>二、高阶函数（“函数即值”，函数可以被赋值给变量或传递给另一个函数）
函数的 柯里化：通过 函数调用 继续返回函数的方式，实现多次接收参数最后统一处理的 函数 编码形式
2.1 常见的高阶函数
2.1.1 filter（filter接收另一个函数作为参数）
array.filter(function(currentValue,index,arr), thisValue)
let animals = [
{
name: '小白', type: 'dog', age: 1
},
{
name: '咪咪', type: 'cat', age: 3
},
{
name: '旺旺', type: 'dog', age: 2
},
{
name: '公主', type: 'cat', age: 2
}
]
let isCats = function (animals) {
return animals.type === "cat"
}
let cats = animals.filter(isCats)
//console.log(cats)
//[ { name: '咪咪', type: 'cat' }, { name: '公主', type: 'cat' } ]2.1.2 map
array.map(function(currentValue,index,arr), thisValue)
/*
let names = animals.map((animals) => {
return animals.name + "今年" + animals.age + "岁"
})
*/
let names = animals.map(a =>
a.name + "今年" + a.age + "岁"
)
//console.log(names)
//[ '小白今年1岁', '咪咪今年3岁', '旺旺今年2岁', '公主今年2岁' ]2.1.3 reduce
案例1 求和
let orders = [{
amount: 100
}, {
amount: 20
}, {
amount: 100
}, {
amount: 50
}]
let totals = orders.reduce((pre, cur) => pre + cur.amount, 0)
//console.log(totals)//270案例2 将accounts.txt文件中的数据转成 json 格式
1001；牛奶；45/箱
1001；雪碧；3/瓶
1001；AD钙；46/箱
1002；牛肉；45/盒
1002；基围虾；36/盒
let output = fs.readFileSync('accounts.txt', 'utf8')
.trim()
.split('\n')
.map(line => line.split('；'))
.reduce((accounts, line) => {
//确保之前的数据存在，就复用之前的数据，否则再创建空数组
accounts[line[0]] = accounts[line[0]] || []
accounts[line[0]].push({
code: line[0],
name: line[1],
price: line[2]
})
return accounts
}, {})
//第三个参数控制最终字符串里的间距
console.log('accountList', JSON.stringify(output, null, 2))其余：
new Promise(()=>{})
setTimeout(()=>{})
......
2.2 React中的应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>函数柯里化</title>
</head>
<body>
<div id="test"></div>
<script src="../js/16.8.4/react.development.js"></script>
<script src="../js/16.8.4/react-dom.development.js"></script>
<script src="../js/16.8.4/babel.min.js"></script>
<script type="text/babel">
class Login extends React.Component {
state = {
username: '',
password: '',
}
//输入类的DOM，随着输入，将输入内容维护到状态中，要用时再取出来
// 保存表单数据到状态
setFormData = (dataType) => {
return (event) => {
this.setState({
//变量 dataType
[dataType]: event.target.value,
})
}
}
//表单提交的回调
handel = (event) => {
event.preventDefault() //阻止表单提交
const { username, password } = this.state
alert(`用户名:${username},密码：${password}`)
}
render () {
return (
<form
action="https://www.baidu.com/"
onSubmit={this.handel}
>
{/*onChange 将this.setFormData('username')的返回值作为回调，必须yo用函数作为事件的回调*/}
用户名：
<input
type="text"
name="username"
onChange={this.setFormData('username')}
/>
密码：
<input
type="password"
name="password"
onChange={this.setFormData('password')}
/>
<button>登录</button>
</form>
)
}
}
ReactDOM.render(<Login />, document.getElementById('test'))
</script>
</body>
</html>补充：
1. jsx里的注释写法 { /* js里的注释方法 */ }
2. 可折叠注释写法
//#region /* 高阶函数 */ //#endregion
扫一扫
1509
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
