受控组件就是可以被 react 状态控制的组件
在 react 中，Input textarea 等组件默认是非受控组件（输入框内部的值是用户控制，和React无关）。但是也可以转化成受控组件，就是通过 onChange 事件获取当前输入内容，将当前输入内容作为 value 传入，此时就成为受控组件。
好处：可以通过 onChange 事件控制用户输入，使用正则表达式过滤不合理输入。
1.受控组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 准备容器 -->
<div id="test"></div>
<div id="test1"></div>
<!-- 引入React核心库 -->
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<!-- 引入React-DOM -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
<!-- 引入babel,将jsx转换为js -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
class Demo extends React.Component {
constructor(props) {
super(props)
}
state = {
username: '',
pass: ''
}
submitHandler = (event) => {
event.preventDefault();// 阻止默认事件
let { username, pass } = this.state
if (username && pass) {
console.log(`我叫${username}, 我的${pass}`)
}
}
changeName = (event) => {
this.setState({
username: event.target.value
})
}
changePass = () => {
this.setState({
pass: event.target.value
})
}
render () {
return (
<form onSubmit={ this.submitHandler }>
<input type="text" onChange={this.changeName} name="usename"/>
<input type="password" onChange={this.changePass} name="password"/>
<button>登录</button>
</form>
)
}
}
ReactDOM.render(<Demo/>, document.getElementById('test'))
</script>
</body>
</html>
非受控组件的写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>非受控组件</title>
</head>
<body>
<!-- 准备容器 -->
<div id="test"></div>
<div id="test1"></div>
<!-- 引入React核心库 -->
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<!-- 引入React-DOM -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
<!-- 引入babel,将jsx转换为js -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
class Demo extends React.Component {
handlersubmit = (event) => {
event.preventDefault(); // 阻止默认事件
let { username, password } = this
console.log(`我叫${ username.value }, 我今年${ password.value }`);
}
render () {
return (
<div>
<form onSubmit={ this.handlersubmit }>
用户名：<input type="text" ref={ c=> this.username = c } name ='username' placeholder="请输入用户名"/>
密码：<input type="password" ref={ c=> this.password = c } placeholder="密码" name="password"/>
<button>登录</button>
</form>
</div>
)
}
}
ReactDOM.render(<Demo/>, document.getElementById('test'))
</script>
</body>
</html>、