一.事件处理
<!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>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<!-- 引入prop-types,用于对标签属性进行限制 -->
<!-- <script type="text/javascript" src="..js/prop-types.js"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js"></script>
<script type="text/babel">
// 创建
class Demo extends React.Component {
/* (1)通过onXxx属性指定事件处理函数(注意大小写)
a.React使用的是自定义(合成)事件,而不是使用的原生DOM事件-->为了更好的兼容性
b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)-->为了高效
(2)通过event.target得到发生事件的DOM元素对象-->不要过度使用ref
// 发生事件的元素正好是需要操作的元素就可以不使用refs,使用event.target.value
*/
// 创建ref容器
myRef = React.createRef()
myRef2 = React.createRef()
// 展示左侧输入框的数据
showData = ()=>{
alert(this.myRef.current.value)
}
showData2 = (event)=>{
alert(event.target.value)
}
render(){
return (
<div >
<input ref={this.myRef} type = "text" placeholder="点击按钮提示数据"/>
<button ref="button100" type="button" onClick={this.showData}>点击按钮提示左侧数据</button>
<input type = "text" placeholder="失去焦点提示数据" onBlur={this.showData2 }/>
</div>
)
}
}
// 渲染
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
</body>
</html>
二.收集表单数据
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>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<!-- 引入prop-types,用于对标签属性进行限制 -->
<!-- <script type="text/javascript" src="..js/prop-types.js"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js"></script>
<script type="text/babel">
// 创建组件
// 非受控组件:页面中所有输入类DOM,现用现取
class Login extends React.Component {
handleSubmit=(event)=>{
event.preventDefault()
const{username,password} =this
alert(`用户名为${username.value},密码为${password.value}`)
}
render(){
return (
<form action="http://www.atguigu.com" onSubmit={this.handleSubmit}>
用户名:<input ref={c=>this.username=c} type = "text" name = "username" placeholder="请输入用户名"/>
密码:<input ref={c=>this.password=c} type = "password" name = "password" placeholder="请输入密码" />
<button >登录</button>
</form>
)
}
}
// 渲染
ReactDOM.render(<Login/>,document.getElementById('test'))
</script>
</body>
</html>
2.受控组件
1.输入类的DOM都能绑定onChange
2.随着你的输入,会将输入内容维护到状态中,需要使用时将内容从状态中取出来
<!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>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<!-- 引入prop-types,用于对标签属性进行限制 -->
<!-- <script type="text/javascript" src="..js/prop-types.js"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js"></script>
<script type="text/babel">
// 创建组件
// 受控组件:页面中所有输入类DOM,随着你的输入,会将输入内容维护到状态中,需要使用时将内容从状态中取出来
class Login extends React.Component {
// 初始化状态
state={
username:'',//用户名
password:''//密码
}
// 通过event.target得到发生事件的DOM元素对象,发生事件的元素正好是需要操作的元素就可以不使用refs,使用event.target.value
saveUsername=(event)=>{
// console.log(event.target.value)
// 将用户名存入状态中
this.setState({username:event.target.value})
}
// 将密码存入状态中
savePassword=(event)=>{
this.setState({password:event.target.value})
}
// 表单提交的回调
handleSubmit=(event)=>{
event.preventDefault()
const {username,password} = this.state
alert(`用户名为${username},密码为${password}`)
}
render(){
return (
<form onSubmit={this.handleSubmit}>
用户名:<input onChange={this.saveUsername} type = "text" name = "username" placeholder="请输入用户名"/>
密码:<input onChange={this.savePassword} type = "password" name = "password" placeholder="请输入密码" />
<button >登录</button>
</form>
)
}
}
// 渲染
ReactDOM.render(<Login/>,document.getElementById('test'))
</script>
</body>
</html>