React - 受控元件和非受控元件
阿新 • • 發佈：2021-05-18
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" 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”，使用次數多了會存在效率上的問題。