React 组件和事件

基于class 关键字创建组件

1.最基本的组件结构

//如果要使用 class 定义组件，必须让自己的组件基础React.Component
class 组件名称 extends React.Component{
	//在组件内部，必须有 render 函数
    //作用是渲染当前组件的虚拟 DOM 组件
	render(){
        //render 函数中，必须返回合法的 jsx 虚拟DOM结构
		return <div>这是 class 创建的组件</div>
	}

}

2.两种创建组件方式的对比

注意：使用 class 关键字创建的组件，有自己的私有数据（this.state）和生命周期函数；

注意：使用 function 创建的组件，只有 props ，没有自己的私有数据和生命周期函数；

• 用构造函数创建的组件：叫做“无状态组件”
• 用 class 关键字创建的组件：叫做“有状状态组件” 【比较常用】
• 两者的本质区别：有无 state 属性、生命周期函数

组件化渲染数据列表

子组件 List

import React from 'react';

//直接导入 css 样式表，默认是在全局生效
import '../style/list.css'

const p  = {fontSize:'16px'}

//使用 function 构造函数，定义普通的无状态组件
function List(props){
    return <div className='list'>
    <p>ID:{props.id}</p>
    <p style={p}>name:{props.name}</p>
  </div>
  }

export default List;

父组件 Lists

import React from 'react';
import List from './List';

//使用 class 关键字，定义父组件
class Lists extends React.Component{
    constructor(){
      super()
      this.state = {
        list:[
          {id:1,name:'张三'},
          {id:2,name:'李四'},
          {id:3,name:'王二'}
        ]
      }
    }
  
    render(){
      return <div>
        <h2 style={{color:'red',fontSize:35+'px'}}>显示列表</h2>
        {this.state.list.map(item =>
         <List {...item}  key={item.id}></List>
          )}
      </div>
    }
  }


 export default Lists;

CSS 美化组件样式

1.直接写在标签中

<h2 style={{color:'red',fontSize:35+'px'}}></h2>

2.定义一个常量，然后显示

const h = {color:'red',fontSize:35+'px'}

<h2 style={h}></h2>

3.直接导入 css 样式表，默认是在全局生效

import '../style/list.css'

css 启用模块化

1.配置 webpack.config.js 中 module，为 css-loader添加参数

module:{
	rules:[
		{ test:/\.css$/, use: ['style-loader','css-loader?modules'] }
		//打包处理 css 样式表的第三方 loader
	]
}

2.在组件中导入样式表

import cssobj from '../style/list.css'

3.在需要的 HTML 标签上使用

<div className={cssobj.list}></div>

<div className={[cssobj.list, cssobj['list-item']].ioin('')}></div>

注意：css 模块化，只针对类选择器和 Id 选择器生效，不会将标签选择器模块化

React 中绑定事件

事件的名称都是 React 提供的，因此名称的首字母必须大写 onClick、onMouseOver

点击事件

为事件提供的处理函数，必须是如下格式

onClick = { function }

直接写在一行

 <button onClick={function(){console.log('ok')}}>点击事件</button>

调用函数

<button onClick={this.myFunction}>点击事件</button>

myFunction(){
    console.log('ok')
}

用的最多的事件绑定形式

//调用函数，并传递参数，多个参数逗号隔开
<button onClick={() => this.show('ok')}>点击事件</button>

//事件的处理函数，需要定义为一个箭头函数，然后赋值给函数名称
show =(e) =>{
    console.log(e)
}

修改 state 数据

在 React 中，如果想要修改 state 中的数据，推荐使用 this.setState({ })

在 setState 中，指挥把对应的 state 状态更新，而不会覆盖其它的 state 状态

this.setState({
	title:'标题'
})

注意：this.setState 方法的执行，是异步的，要想获取最新的值，需要使用 this.setState({}, callback)

this.setState({
	title:'标题'
},function(){
    console.log(this.state.title)
})

绑定文本框与 state 中的值

this.state = {
    title:'名称'
}

<input type="text" value={this.state.title} onChange={(e)=>this.txtChange(e)} />

txtChange = (e) =>{
    console.log(e.target.value)
    this.setState({
        title:e.target.value
    })
}