问题集 & 知识点
芝士
【事件绑定的三种方法】
在以类继承的方式定义的组件中,为了能方便地调用当前组件的其他成员方法或属性(如:this.state),通常需要将事件处理函数运行时的 this 指向当前组件实例。
绑定事件处理函数this的几种方法:
//第一种方法:
//写在组件中
run(){
alert(this.state.name)
}
<button onClick={this.run.bind(this)}>按钮</button> //第二种方法:
//构造函数中改变
this.run = this.run.bind(this);
run(){
alert(this.state.name)
}
<button onClick={this.run>按钮</button> //第三种方法:
//箭头函数运用
run=()=> {
alert(this.state.name)
}
<button onClick={this.run>按钮</button>
【通过ref获取DOM节点】
class Test extends React.Component{
constructor(props){
super(props);
this.state={
name:'liyang'
}
}
change=(value)=>{
//这里实现获取button标签的value属性值
let val =this.refs.myname.value;
this.setState({
name:val,
})
}
render(){
return(
<div>
<p>myname is : {this.state.name}</p>
<button ref='myname' onClick={this.change} value='123'>click</button>
</div>
)
}
} ReactDOM.render(<Test />, document.getElementById('root'));
【约束性和非约束性组件】
非约束性组: <input type="text" defaultValue="a" /> 这个 defaultValue 其实就是原生DOM中的 value 属性。
这样写出的来的组件,其value值就是用户输入的内容,React完全不管理输入的过程。
约束性组件: <input value={this.state.username} type="text" onChange={this.handleUsername} />
这里,value属性不再是一个写死的值,他是 this.state.username, this.state.username 是由 this.handleChange 负责管理的。
这个时候实际上 input 的 value 根本不是用户输入的内容。而是onChange 事件触发之后,由于 this.setState 导致了一次重新渲染。不过React会优化这个渲染过程。看上去有点类似双向数据绑定
问题
【this.state定义了一个数组,如何向数组增加数据呢】
制作数组的拷贝newlist,用array.push()的方法把数据加入到拷贝中newlist,最后用拷贝newlist来更新this.state中的数组。
class Main extends React.Component{
constructor(props){
super(props);
this.state={
inputvalue:'',
pro_list:[],
};
}
navCallBack=(sub_inputvalue)=>{
//实现向数组中添加数据
var newlist=this.state.pro_list;
newlist.push(sub_inputvalue);
this.setState({
inputvalue:sub_inputvalue,
pro_list:newlist
}); }
//.......
}
【如何实现清空input框的效果呢?】
【如何实现点击按钮删除一条数据呢?】
【JS箭头函数的this指向问题,指向哪里呢?如果是层层嵌套的函数,this指向是怎样的呢?】
【React中A组件如何调用B组件中的方法,达到修改B组件的状态的效果。】
描述:点击按钮(A组件)后刷新时间(B组件)
解决方案:新增一个父组件(Main),把状态提升到这个组件里面。
import React from 'react';
import ReactDOM from 'react-dom'; class Clock extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h2>name:{this.props.name}</h2>
<h2>It is {this.props.mydate}.</h2>
</div>
);
}
}
class ClickMe extends React.Component{
constructor(props) {
super(props);
}
handleClick=()=>{
//通过回调函数向父组件传递一个日期的参数,用于更新父组件的this.state.date
//更新成功后父组件会向Clock子组件传递数据
this.props.newTime(new Date());
}
render(){
return(
<div>
<button type="button" onClick={this.handleClick}>click me</button>
</div>
)
}
}
class Main extends React.Component{
constructor(props){
super(props);
this.state = {
myname:'username1',
date: new Date(),
};
}
getDate=(v)=>{
this.setState({
date:v,
})
}
render(){
return(
<div>
<Clock name={this.state.myname} mydate={this.state.date.toLocaleTimeString()}/>
<ClickMe newTime={this.getDate}/>
</div>
) }
}
ReactDOM.render(<Main/>, document.getElementById('root'));
【React中 再构造函数写 .bind(this)的意义在哪里?】
【JS实现固定侧边栏,也就是侧边栏单独滚动,和内容页互不影响】
位置:antd的布局 -> 最后一部分固定侧边栏 有相关的写法
<Sider style={{
overflow: 'auto', height: '100vh', position: 'fixed', left: 0,
}}
>
//......
【JS如何实现侧边栏可以拖拉改变大小?】
问题集 & 知识点的更多相关文章
- javascript常用知识点集
javascript常用知识点集 目录结构 一.jquery源码中常见知识点 二.javascript中原型链常见的知识点 三.常用的方法集知识点 一.jquery源码中常见的知识点 1.string ...
- OI暑假集训游记
莞中OI集训游记 Written BY Jum Leon. I 又是一载夏,本蒟蒻以特长生考入莞中,怀着忐忑的心情到了8月,是集训之际.怀着对算法学习的向往心情被大佬暴虐的一丝恐惧来到了 ...
- 【干货分享】前端面试知识点锦集04(Others篇)——附答案
四.Others部分 技术类 1.http状态码有哪些?分别代表是什么意思? (1).成功2×× 成功处理了请求的状态码.200 服务器已成功处理了请求并提供了请求的网页.204 服务器成功处理了请求 ...
- 【干货分享】前端面试知识点锦集01(HTML篇)——附答案
一.HTML部分 1.浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层.表示层.行为层分别是:HTML.CSS.JavaScript作用:HTML实现页面结构,CSS完成页面的表现与风格 ...
- Redis 集群知识点及命令
Redis 集群命令 备注 cluster nodes 查看集群包含的节点 cluster meet <ip> <port> 将 ip 和 port 所指定的节点添加到 nod ...
- C/C++中一些不太注意到的小知识点--[锦集]
C/C++中一些不太注意到的小知识点--[锦集] C/C++小知识点--[锦集] "="和"<=" 的优先级 1.( (file_got_len = re ...
- OI知识点|NOIP考点|省选考点|教程与学习笔记合集
点亮技能树行动-- 本篇blog按照分类将网上写的OI知识点归纳了一下,然后会附上蒟蒻我的学习笔记或者是我认为写的不错的专题博客qwqwqwq(好吧,其实已经咕咕咕了...) 基础算法 贪心 枚举 分 ...
- SpringCloud02 Eureka知识点、Eureka服务端和客户端的创建、Eureka服务端集群、Eureka客户端向集群的Eureka服务端注册
1 Eureka知识点 按照功能划分: Eureka由Eureka服务端和Eureka客户端组成 按照角色划分: Eureka由Eureka Server.Service Provider.Servi ...
- 【干货分享】前端面试知识点锦集03(JavaScript篇)——附答案
三.JavaScript部分 1.谈谈你对Ajax的理解?(概念.特点.作用) AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是 ...
随机推荐
- Django 模板系统
Django模板系统 常用语法 {{}} 变量相关 {%%} 逻辑相关 变量 格式 {{ 变量名 }} 命名规则 包括任何字母数字以及下划线 ("_")的组合 变量名称中不能有空格 ...
- Ubuntu 服务器上面--安装和配置mysql 【转】
更新源列表 打开"终端窗口",输入"sudo apt-get update"-->回车-->"输入root用户的密码"--> ...
- 动态SQL之、条件判断(转)
错误方式一: 在mybatis的动态sql语句中使用<if>标签可以判断sql中的条件是否成立. <select id="getPerson" resultTyp ...
- python之OpenCv(三)---基本绘图
opencv 提供了绘制直线.圆形.矩形等基本绘图的功能 1.绘直线 cv2.line(画布,起点坐标,终点坐标,颜色,宽度) 例如: cv2.line(image,(20,60),(300,400) ...
- JS兼容问题
//1.滚动条到顶端的距离 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //2.滚动条 ...
- Mac新手必看教程—让你离熟练操作mac只差十分钟
本文收录于:风云社区(提供各类mac软件资源下载) 本文源自:什么值得买 无论轻薄办公本.还是赶超台式性能的游戏本,关注#笔记本攻略#栏目,解决笔记本电脑从选购到使用的各种问题. 引子 大部分用户接触 ...
- python格式化输出的几种方式
第一种 字符串拼接 就不写了 下面的是 第二 第三 第四种 name = input("name:") age = int(input("age:")) p ...
- 1.1浅谈Spring(一个叫春的框架)
如今各种Spring框架甚嚣尘上,但是终归还是属于spring的东西.所以在这里,个人谈一谈对spring的认识,笔者觉得掌握spring原理以及spring所涉及到的设计模式对我们具有极大的帮助.我 ...
- saltstack主机管理项目:计主机管理项目命令分发器(三)
一.开发目标命令格式如下: 二.目录结构 三.代码注解 01.salt.py 只是一个入口,没干什么事情 #!/usr/bin/env python # -*- coding:utf-8 -*- # ...
- 基于ionic4、cordova搭建android开发环境
前颜(yan)最近公司有一个项目需求是利用h5进行跨平台开发,这里所说的跨平台开发指的是:将h5代码利用某种方式或工具环境进行打包,最后生成android的apk以及ios的ipa. 本文只讲解and ...