reactjs学习--03

jsx中的行内样式

直接写在标签中：

格式：style = {{}}

抽离样式成一个变量

抽离样式成一个单独文件

ComListItemStyle.js

ComListItem.jsx

通过样式表使用样式

原因：通过写行内样式太麻烦，通过样式表来开发更符合实际

准备

因为webpack无法解决.css文件，因此还有下载解决css文件的相关loader

执行命令 npm i –D style-loader css-loader

并配置webpack.config.js文件

创建css文件夹

样式定义

导入样式表文件

引用样式表  => ComListClass.jsx

网页上引用的样式表

可以看出其实是在网页的全局上定义了一个title类

reactjs解决css样式表全局作用域的问题：

启用css选择器模块化

通过给css-loader追加参数modules启用css-loader的模块化

也可以写成下面的形式

导入样式模块

打印comListCss

引用样式表

网页上引用的样式表

可以看出其实是在网页全局上定义了一个由hash值构成名称的类

这个hash名称对应的就是title

注意点：这个css选择器的模块化只对类选择器和id选择器有效

补充：自定义通过hash值生成的类名

css-loader再追加参数localIdentName

参数定义：

[path]:相对于根路径的所在路径 这里根路径是src

[name]：样式表文件的名称

[local]：样式类的名称或者id名称

[hash:number]：表示8位的hash值

取消模块化

:global(.title){font-sze:12px}

被:global()包裹起来后就不会模块化

而被:local()包裹则会模块化，开启modules后，默认省略不写

解决打包第三方样式表时也会默认模块化打包的问题

当我们要用bootstrap时，因为样式文件结尾也是css，因此也会被模块化打包

到时要引用bootstrap样式时就会造成不必要的麻烦。

可以通过重新配置规则来解决，定义自定义的样式表使用scss或者less编写，而第三方样式表

使用css。因此只需给scss、或者less模块化即可。

记得先安装scss或者less的相关loader

reactjs的事件绑定

reactjs有自己的一套事件定义

例如 ：点击事件的名称为：onClick  鼠标移入事件：onMouseOver

在组件中使用事件绑定：

调用组件内部实例方法记得要用this关键字调用

基本格式 onClick = {function}  接收参数function

使用方法1：onClick = {this.clickAlert} 没法加小括号，若加小括号会在加载页面时直接执行函数，因此没法传递参数

使用方法2：onClick = {() => {this.clickAlert(message)}} 可以实现函数传参，用得最多

响应式修改this.state属性的值

如果直接通过this.state.message = ‘666’这样修改，虽然改变了state中的值，但是不会响应式更新页面中的数据

而调用reactjs组件中的setState()函数可以做到响应式

注意点：这里setState更新message不会覆盖掉name属性，而且setState的方法是异步的，若要获取setState函数处理后的结果，得传入callback参数，并且在callback函数中获取结果

表单数据的双向绑定

react没有类似v-model的功能，需要自己实现双向数据绑定

通过onChange事件监听实现，将页面数据绑定进state中的功能

方法1：通过事件对象e.target.value

方法2：通过refs获取dom元素，来获取value值 => 类似vue的$refs

(1)  html上绑定ref属性 ref=’txt’  (2) this.refs.txt.value

reactjs学习--03

原文：https://www.cnblogs.com/chujunqiao/p/11755556.html