浅析React中的受控组件和非受控组件
编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
具体来说这是一种react非受控组件，其状态是在input的react内部控制，不受调用者控制。可以使用受控组件来实现。狼蚁网站SEO优化就说说这个React中的受控组件与非受控组件的相关知识，感兴趣的朋友一起看看吧
非受控组件
表单数据由DOM本身处理。即不受setState()的控制，与传统的HTML表单输入相似，input输入值即显示最新值（使用 ref从DOM获取表单值）
1.非受控组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--准备好一个容器-->
<div id="test"></div>
<!--引入react核心库-->
<script src="../js/react.development.js"></script>
<!--引入react-dom，用于支持react操作dom-->
<script src="../js/react-dom.development.js"></script>
<!--引入babel，用于将jsx转为js-->
<script src="../js/babel.min.js"></script>
<!--引入prop-types,用于对组件标签属性进行限制-->
<script src="../js/prop-types.js"></script>
<script type="text/babel">
class Login extends React.Component {
myRef1 = React.createRef();
myRef2 = React.createRef();
handleSubmit = (event) => {
event.preventDefault() // 阻止表单提交
const username = this.myRef1.current
const password = this.myRef2.current
alert(`您输入的用户名是:${username.value},您输入的密码是：${password.value}`)
}
render() {
return (
<form onSubmit={this.handleSubmit}>
用户名：<input ref={this.myRef1} type="text"/>
密码：<input ref={this.myRef2} type="text"/>
<button>登录</button>
</form>
)
}
}
ReactDOM.render(<Login/>,document.getElementById('test'))
</script>
</body>
</html>
受控组件
在HTML中，标签<input>、<textarea>、<select>的值的改变通常是根据用户输入进行更新。在React中，可变状态通常保存在组件的状态属性中，并且只能使用 setState() 更新，而呈现表单的React组件也控制着在后续用户输入时该表单中发生的情况，以这种由React控制的输入表单元素而改变其值的方式，称为：“受控组件”。
2.受控组件 （受到控制）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--准备好一个容器-->
<div id="test"></div>
<!--引入react核心库-->
<script src="../js/react.development.js"></script>
<!--引入react-dom，用于支持react操作dom-->
<script src="../js/react-dom.development.js"></script>
<!--引入babel，用于将jsx转为js-->
<script src="../js/babel.min.js"></script>
<!--引入prop-types,用于对组件标签属性进行限制-->
<script src="../js/prop-types.js"></script>
<script type="text/babel">
class Login extends React.Component {
// 初始化状态
state = {
username: '',
password: ''
}
// 保存用户名到状态中
saveUsername = (e) => {
this.setState({username: e.target.value})
}
// 保存密码到状态中
savePassword = (e) => {
this.setState({password: e.target.value})
}
handleSubmit = (e) => {
e.preventDefault() // 阻止表单提交
const {username,password} = this.state
alert(`您输入的用户名是:${username},您输入的密码是：${password}`)
}
render() {
// onChange是一有变化就改变
return (
<form onSubmit={this.handleSubmit}>
用户名：<input onChange={this.saveUsername} type="text"/>
密码：<input onChange={this.savePassword} type="text"/>
<button>登录</button>
</form>
)
}
}
ReactDOM.render(<Login/>,document.getElementById('test'))
</script>
</body>
</html>
注意
一般情况，受控组件用的多，因为在非受控组件中会多次使用ref，而官方文档上有些“请勿过度使用ref”，使用次数多了会存在效率上的问题。
结论
受控和非受控元素都有其优点，根据具体情况选择。如果表单在UI反馈方面非常简单，则对ref进行控制是完全正确的，即使用非受控组件。
| 特征 | 非受控制 | 受控 |
| 一次性检索（例如表单提交） | yes | yes |
| 及时验证 | no | yes |
| 有条件的禁用提交按钮 | no | yes |
| 执行输入格式 | no | yes |
| 一个数据的几个输入 | no | yes |
| 动态输入 | no | yes |
以上就是浅析React中的受控组件和非受控组件的详细内容，更多关于react受控组件和非受控组件的资料请关注狼蚁SEO其它相关文章！
上一篇：微信小程序中实现车牌输入功能
下一篇：利用JS定时器实现元素移动