React系列-受控组件

admin 2025年2月13日11:14:19评论1 views字数 5979阅读19分55秒阅读模式

前置知识

受控组件的状态由开发者维护,非受控组件的状态由组件自身维护;

由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系列-受控组件

免责声明:文章中涉及的程序(方法)可能带有攻击性,仅供安全研究与教学之用,读者将其信息做其他用途,由读者承担全部法律及连带责任,本站不承担任何法律及连带责任;如有问题可邮件联系(建议使用企业邮箱或有效邮箱,避免邮件被拦截,联系方式见首页),望知悉。
  • 左青龙
  • 微信扫一扫
  • weinxin
  • 右白虎
  • 微信扫一扫
  • weinxin
admin
  • 本文由 发表于 2025年2月13日11:14:19
  • 转载请保留本文链接(CN-SEC中文网:感谢原作者辛苦付出):
                   React系列-受控组件https://cn-sec.com/archives/1059838.html
                  免责声明:文章中涉及的程序(方法)可能带有攻击性,仅供安全研究与教学之用,读者将其信息做其他用途,由读者承担全部法律及连带责任,本站不承担任何法律及连带责任;如有问题可邮件联系(建议使用企业邮箱或有效邮箱,避免邮件被拦截,联系方式见首页),望知悉.

发表评论

匿名网友 填写信息