芝士

【事件绑定的三种方法】

在以类继承的方式定义的组件中,为了能方便地调用当前组件的其他成员方法或属性(如: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如何实现侧边栏可以拖拉改变大小?】

问题集 & 知识点的更多相关文章

  1. javascript常用知识点集

    javascript常用知识点集 目录结构 一.jquery源码中常见知识点 二.javascript中原型链常见的知识点 三.常用的方法集知识点 一.jquery源码中常见的知识点 1.string ...

  2. OI暑假集训游记

    莞中OI集训游记 Written BY Jum Leon. I        又是一载夏,本蒟蒻以特长生考入莞中,怀着忐忑的心情到了8月,是集训之际.怀着对算法学习的向往心情被大佬暴虐的一丝恐惧来到了 ...

  3. 【干货分享】前端面试知识点锦集04(Others篇)——附答案

    四.Others部分 技术类 1.http状态码有哪些?分别代表是什么意思? (1).成功2×× 成功处理了请求的状态码.200 服务器已成功处理了请求并提供了请求的网页.204 服务器成功处理了请求 ...

  4. 【干货分享】前端面试知识点锦集01(HTML篇)——附答案

    一.HTML部分 1.浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层.表示层.行为层分别是:HTML.CSS.JavaScript作用:HTML实现页面结构,CSS完成页面的表现与风格 ...

  5. Redis 集群知识点及命令

    Redis 集群命令 备注 cluster nodes 查看集群包含的节点 cluster meet <ip> <port> 将 ip 和 port 所指定的节点添加到 nod ...

  6. C/C++中一些不太注意到的小知识点--[锦集]

    C/C++中一些不太注意到的小知识点--[锦集] C/C++小知识点--[锦集] "="和"<=" 的优先级 1.( (file_got_len = re ...

  7. OI知识点|NOIP考点|省选考点|教程与学习笔记合集

    点亮技能树行动-- 本篇blog按照分类将网上写的OI知识点归纳了一下,然后会附上蒟蒻我的学习笔记或者是我认为写的不错的专题博客qwqwqwq(好吧,其实已经咕咕咕了...) 基础算法 贪心 枚举 分 ...

  8. SpringCloud02 Eureka知识点、Eureka服务端和客户端的创建、Eureka服务端集群、Eureka客户端向集群的Eureka服务端注册

    1 Eureka知识点 按照功能划分: Eureka由Eureka服务端和Eureka客户端组成 按照角色划分: Eureka由Eureka Server.Service Provider.Servi ...

  9. 【干货分享】前端面试知识点锦集03(JavaScript篇)——附答案

    三.JavaScript部分 1.谈谈你对Ajax的理解?(概念.特点.作用) AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是 ...

随机推荐

  1. Python实例学习-文件备份

    1. 介绍 通过实例学习Python的使用,该实例来自文献[1]中的第11章解决问题. 由于没有搞清楚Win7下如何通过命令行调用zip命令,所以采用7z[2],采用7-zip命令行版本[3],版本号 ...

  2. 1:wamp如何更改网站根目录DocumentRoot 2:php的error_log文件(txt)会每秒几十K增大

    wamp如何更改网站根目录DocumentRoot     想必很多人都使用wamp来开发php的web应用吧,同时某些情况下我们或许需要修改服务器的根目录来方便我们搭建和开发网站,接下里我们将说明如 ...

  3. JavaScript 中undefined,null,NaN的区别

    1.类型分析: js中的数据类型有undefined,boolean,number,string,object等5种,前4种为原始类型,第5种为引用类型.var a1;var a2 = true;va ...

  4. UVa 12563 Jin Ge Jin Qu hao【01背包】

    题意:给出t秒时间,n首歌分别的时间a[i],还给出一首长度为678的必须唱的劲歌金曲,问最多能够唱多少首歌(只要最后时间还剩余一秒,都可以将劲歌金曲唱完) 用dp[i]代表花费i时间时唱的歌的最大数 ...

  5. 大数据应用日志采集之Scribe演示实例完全解析

    大数据应用日志采集之Scribe演示实例完全解析 引子: Scribe是Facebook开源的日志收集系统,在Facebook内部已经得到大量的应用.它能够从各种日志源上收集日志,存储到一个中央存储系 ...

  6. 1602A液晶

    液晶显示屏中,1602型算是比较简单的一种,据说和12864还是全兼容的.这两天学习的结果如下.一.1602里的存储器有三种:CGROM.CGRAM.DDRAM.CGROM保存了厂家生产时固化在LCM ...

  7. springboot整合mybatis使用阿里(阿里连接池)和xml方式

    源码地址:https://github.com/wuhongpu/springboot-mybatis.git 1.在pom文件中引入相关依赖包 <?xml version="1.0& ...

  8. OAuth2

    OAuth2: 适合To C的应用场景, 比如我们开发一个app, 可以借用微信/微博用户认证开放接口, 达到免注册登陆, 企业内部系统没有必要引入. OAuth2的步骤较多, 角色也较多, 涉及到a ...

  9. Android常用第三方支付

    移动支付 用户使用移动的终端完成对所购买商品或者服务的支付功能;分为近场支付(蓝牙支付,刷卡,滴卡),和远程支付(网上支付,短信支付) app支付模块 常见的支付厂商-->常见的支付方式 支付宝 ...

  10. LOJ6053 简单的函数 【Min_25筛】【埃拉托斯特尼筛】

    先定义几个符号: []:若方括号内为一个值,则向下取整,否则为布尔判断 集合P:素数集合. 题目分析: 题目是一个积性函数.做法之一是洲阁筛,也可以采用Min_25筛. 对于一个可以进行Min_25筛 ...