本章以demo为例介绍一个全受控表单元素的 change数据维护 以及 表单提交
demo
交互
代码
import React, { PureComponent } from 'react'
export class App extends PureComponent {
constructor() {
super()
this.state = {
username: 'momomo',
password: '',
agree: false,
hobbies: [
{
value: 'sing',
text: '唱',
isChecked: false
},
{
value: 'play games',
text: '玩游戏',
isChecked: false
},
{
value: 'swim',
text: '游泳',
isChecked: false
}
],
fruit: 'purple',
fruits: []
}
}
handleSubmit (e) {
// 原始type=submit类型的提交,会导致提交后页面刷新
// 现在使用点击事件,获取到表单元素数据,进行操作数据,再通过ajax发送网络请求
// 1、阻止默认行为
e.preventDefault()
console.log('获取所有输入内容', this.state)
}
handleChange (e) {
this.setState({
username: e.target.value
})
}
handleChangePwd (e) {
this.setState({
password: e.target.value
})
}
handleInputChange (e) {
console.log(e.target.name, e.target.checked)
const key = e.target.name
this.setState({
[key]: key === 'agree' ? e.target.checked : e.target.value
})
}
changeBox (e) {
console.log(e.target.name, e.target.checked)
const hobbies = [...this.state.hobbies]
hobbies.find(item => item.value === e.target.name).isChecked = e.target.checked
this.setState({
hobbies
})
}
handleChangeSelect (e) {
console.log(e.target.name, e.target.selectedOptions)
const options = Array.from(e.target.selectedOptions)
console.log(options)
const values = options.map(item => item.value)
// Array.form(可迭代对象,mapFunc)
const values1 = Array.from(e.target.selectedOptions, item => item.value)
// this.setState({
// [e.target.name]: e.target.value
// })
this.setState({
fruits: values1
})
}
render () {
const { username, password, agree, hobbies, fruit, fruits } = this.state
return (
<div>
<form action="/abc" onSubmit={(e) => this.handleSubmit(e)}>
<label htmlFor='username'>
用户:<input name="username" id="username" value={username} onChange={(e) => this.handleInputChange(e)} />
</label>
<label htmlFor='username'>
密码:<input name="password" id="password" value={password} onChange={(e) => this.handleInputChange(e)} />
</label>
<div>
<label htmlFor='agree'>
<input name="agree" id="agree" type="checkbox" checked={agree} onChange={(e) => this.handleInputChange(e)} />同意协议
</label>
</div>
<div>
您的爱好:
{
hobbies.map(item => {
return (
<label htmlFor={item.value} key={item.value}>
<input name={item.value} id={item.value} type="checkbox" checked={item.isChecked} onChange={(e) => this.changeBox(e)} />{item.text}
</label>
)
})
}
</div>
<div>水果
<select name="fruit" value={fruits} multiple onChange={(e) => this.handleChangeSelect(e)}>
<option value="apple">apple</option>
<option value="bnana">bnana</option>
<option value="purple">purple</option>
</select>
</div>
<button type="submit">提交</button>
</form>
</div>
)
}
}
export default App
结论:
- form元素中自定义onSubmit 事件进行逻辑处理:onSubmit={(e) => this.handleSubmit(e)}
- 每个表单项变为受控组件2要素:value绑定state的值,增加onChange事件,且都叫onChange
- onChange={(e)=> handler(e)}e必须传递,且在handler中通过e.target.name获取state的key,通过e.target.value获取input/textarea/单选select的值。通过Array.from(e.target.selectedOptions, item=>item.value)获取多选select值。通过e.target. checked获取checkbox的值
- 最终的handleSubmit事件通过this.state获取受控元素的值