前置知识
受控组件的状态由开发者维护,非受控组件的状态由组件自身维护;
由state来决定表单里面的数据,由表单事件处理函数来更改state,使用这样的方式来控制表单输入行为取值的方式的组件
受控组件定义:由state来决定表单内部的数据,由表单的事件处理函数来更改state的方式
react负责渲染表单组件;并且仍然控制用户后续输入时发生的变化 只有react控制输入的元素称为受控组件;
看一个demo:
import ReactDOM from 'react-dom';
import React from 'react'
class App extends React.Component {
//受控组件: 使用1/2的控制表单输入行为取值的方式的组件
//1.state是表单的唯一数据源
state = {
username: '',
password: ''
}
usernameChange(e) {
// e.target --->事件源对象input--->e.target.value 为对应的值
//由state来决定表单里面的数据,由表单事件处理函数来更改state,
//2.控制表单操作并且同步state
this.setState({
username: e.target.value
}, () => {
console.log(this.state.username)
})
}
passwordChange(e) {
this.setState({
password: e.target.value
}, () => {
console.log(this.state.password)
})
}
submitChange(e) {
e.preventDefault();
const {username, password} = this.state;
console.log(username, password)
}
render() {
const {username, password} = this.state;//解构
return (
<form>
<p>
username:
<input
type="text"
placeholder="username"
value={username}
onChange={this.usernameChange.bind(this)}
/>
</p>
<p>
password:
<input
type="password"
placeholder="this is pasword"
value={password}
onChange={this.passwordChange.bind(this)}
/>
</p>
<p>
<button onClick={this.submitChange.bind(this)}>login</button>
</p>
</form>
)
}
}
ReactDOM.render(
<App/>,
document.body
)
数据的流动:
初始数据:state-->数据解构之后,表单可以拿来利用--->点击按钮/向表单中输入数据--->触发表单事件处理函数--->setState来控制表单输入行为(一般通过e.target来获取相对应的事件源对象)
代码简化:
class App extends React.Component {
state = {
username: '',
password: ''
}
Change(e) {
this.setState({
[e.target.name]: e.target.value
})
}
submitChange(e) {
e.preventDefault();
const {username, password} = this.state;
console.log(username, password)
}
render() {
const {username, password} = this.state;//解构
return (
<form>
<p>
username:
<input
type="text"
placeholder="username"
value={username}
name="username"//添加的,给事件源对象添加的名字
onChange={this.Change.bind(this)}
/>
</p>
<p>
password:
<input
type="password"
placeholder="this is pasword"
value={password}
name="password"//添加的
onChange={this.Change.bind(this)}
/>
</p>
<p>
<button onClick={this.submitChange.bind(this)}>login</button>
</p>
</form>
)
}
}
添加一些功能:
class App extends React.Component {
//受控组件: 使用1/2的控制表单输入行为取值的方式的组件
//1.state是表单的唯一数据源
state = {
username: '',
password: '',
gender: 'male',
isStudent: true,
hobbies: [],
}
Change(e) {
this.setState({
[e.target.name]: e.target.value
})
}
handleReset(e) {
e.preventDefault();
this.setState({
username: '',
password: '',
gender: 'male',
})
}
handleIsStudent(isStudent: Boolean) {
this.setState(
{
isStudent
}
)
}
handleHobbiesChange(e) {
if (e.target.checked) {
this.setState({
hobbies: [...this.state.hobbies, e.target.value]
})
} else {
this.setState({
hobbies: this.state.hobbies.filter(hobby => hobby !== e.target.value)
})
}
}
submitChange(e) {
e.preventDefault();
const {username, password, gender, isStudent, hobbies} = this.state;
console.log(username, password, gender, isStudent, hobbies)
}
render() {
const {username, password, gender, isStudent} = this.state;//解构
return (
<form>
<p>
username:
<input
type="text"
placeholder="username"
value={username}
name="username"
onChange={this.Change.bind(this)}
/>
</p>
<p>
password:
<input
type="password"
placeholder="this is pasword"
value={password}
name="password"
onChange={this.Change.bind(this)}
/>
</p>
<p>
<select
value={gender}
name="gender"
onChange={this.Change.bind(this)}
>
<option value="male">男</option>
<option value="female">女</option>
</select>
</p>
<p>
Are u a Student:
Yes<input
type="radio"
name="isStudent"//上面下面的name是一样的,表明只能二选一
checked={isStudent}
onChange={this.handleIsStudent.bind(this, true)}
/>
|
No<input
type="radio"
name="isStudent"
onChange={this.handleIsStudent.bind(this, false)}
/>
</p>
<p>
piano: <input
type="checkbox"
name="hobbies"
value="piano"
onChange={this.handleHobbiesChange.bind(this)}
/> |
travel:<input
type="checkbox"
name="hobbies"
value="travel"
onChange={this.handleHobbiesChange.bind(this)}
/> |
running:<input
type="checkbox"
name="hobbies"
value="running"
onChange={this.handleHobbiesChange.bind(this)}
/> |
singing:<input
type="checkbox"
name="hobbies"
value="singing"
onChange={this.handleHobbiesChange.bind(this)}
/>
</p>
<p>
<button onClick={this.submitChange.bind(this)}>login</button>
<button onClick={this.handleReset.bind(this)}>reset</button>
</p>
</form>
)
}
}
优化后代码:
class App extends React.Component {
//受控组件: 使用1/2的控制表单输入行为取值的方式的组件
//1.state是表单的唯一数据源
state = {
username: '',
password: '',
gender: 'male',
isStudent: true,
hobbies: [],
hobbiesData: [
{
name: 'piano',
value: 'piano'
}, {
name: 'travel',
value: 'travel'
}, {
name: 'running',
value: 'running'
}, {
name: 'singing',
value: 'singing'
}
]
}
Change(e) {
this.setState({
[e.target.name]: e.target.value
})
}
handleReset(e) {
e.preventDefault();
this.setState({
username: '',
password: '',
gender: 'male',
})
}
handleIsStudent(isStudent: Boolean) {
this.setState(
{
isStudent
}
)
}
handleHobbiesChange(e) {
if (e.target.checked) {
this.setState({
hobbies: [...this.state.hobbies, e.target.value]
})
} else {
this.setState({
//e.target.value为你取消的那个元素的value,将没有取消的元素全部过滤出来--->将选中的展示出来
hobbies: this.state.hobbies.filter(hobby => hobby !== e.target.value)
}, () => {
console.log(e.target.value + "。。。this is a test: e.target.value")
})
}
}
submitChange(e) {
e.preventDefault();
const {username, password, gender, isStudent, hobbies} = this.state;
console.log(username, password, gender, isStudent, hobbies)
}
render() {
const {username, password, gender, isStudent, hobbiesData} = this.state;//解构
return (
<form>
<p>
username:
<input
type="text"
placeholder="username"
value={username}
name="username"
onChange={this.Change.bind(this)}
/>
</p>
<p>
password:
<input
type="password"
placeholder="this is pasword"
value={password}
name="password"
onChange={this.Change.bind(this)}
/>
</p>
<p>
<select
value={gender}
name="gender"
onChange={this.Change.bind(this)}
>
<option value="male">男</option>
<option value="female">女</option>
</select>
</p>
<p>
Are u a Student:
Yes<input
type="radio"
name="isStudent"//上面下面的name是一样的,表明只能二选一
checked={isStudent}
onChange={this.handleIsStudent.bind(this, true)}
/>
|
No<input
type="radio"
name="isStudent"
onChange={this.handleIsStudent.bind(this, false)}
/>
</p>
{
hobbiesData.map(item => {
return (
<span>
{item.name}:
<input
type="checkbox"
name="hobbies"
value={item.value}
onChange={this.handleHobbiesChange.bind(this)}
/> |
</span>
)
})
}
<p>
<button onClick={this.submitChange.bind(this)}>login</button>
<button onClick={this.handleReset.bind(this)}>reset</button>
</p>
</form>
)
}
}
ReactDOM.render(
<App/>,
document.body
)
原文始发于微信公众号(迪哥讲事):React系列-受控组件
免责声明:文章中涉及的程序(方法)可能带有攻击性,仅供安全研究与教学之用,读者将其信息做其他用途,由读者承担全部法律及连带责任,本站不承担任何法律及连带责任;如有问题可邮件联系(建议使用企业邮箱或有效邮箱,避免邮件被拦截,联系方式见首页),望知悉。
- 左青龙
- 微信扫一扫
-
- 右白虎
- 微信扫一扫
-
评论