React学习系列六事件对象表单事件键盘事件

定义

事件对象：在触发dom上的某个事件时，会产生一个事件对象event，这个对象中包含所有与事件相关的信息

event.target 获取执行事件的dom节点

event.target.style.background='red' 改变颜色

// 获取dom的属性

event.target.getAttribute('aid')

事件对象

获取表单值

1、监听表单的改变事件  onChange

2、在改变的事件里获取表单输入的值 通过事件对象获取值 e.target.value

3、把表单输入的值赋值给username this.setState({})

4、点击按钮的时候获取state里面的username  this.state.username

获取值的另一种方式 ref

1、给元素定义 ref 属性 ref="user"

2、通过 this.refs.user.value; 也可以获取到值

键盘事件

input 可以加 onKeyUp 方法 可以获取按下键

inputKeyUp =(e) =>{

console.log(e.keyCode);

         if(e.keyCode == 13){

                    alert(e.target.value);

             }

}

双向绑定

像下面这样，比较简单就实现了

附学习代码：

import React from 'react'class TestForm extends  React.Component{constructor(props){super(props);this.state = {username:"张三",sex:'2',selectCity:'',cities:["北京","上海","广州","深圳"],hobbies:[{name:"aaa",isChecked:false},{name:"bbb",isChecked:true},{name:"ccc",isChecked:true},{name:"ddd",isChecked:false}]}}inputChange = (e) =>{this.setState({username:e.target.value})}radioChange =(e) =>{this.setState({sex:e.target.value})}selectChange = (e) =>{this.setState({selectCity:e.target.value})console.log(this.state.selectCity)}checkBoxChange = (key) => {let hobbies = this.state.hobbies;hobbies[key].isChecked= !hobbies[key].isChecked;this.setState({hobbies:hobbies});// alert(key);console.log(this.state.hobbies)}render(){return({this.state.username}
普通文本框： 
男女
{this.state.cities.map((value,key)=>{return  {value}})}
{this.state.hobbies.map((value,key)=>{return ({value.name})}// (item) => {//     return {item.name}// })})}
}
export default TestForm;

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！