芝士

【事件绑定的三种方法】

在以类继承的方式定义的组件中,为了能方便地调用当前组件的其他成员方法或属性(如: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. Django 模板系统

    Django模板系统 常用语法 {{}} 变量相关 {%%} 逻辑相关 变量 格式 {{ 变量名 }} 命名规则 包括任何字母数字以及下划线 ("_")的组合 变量名称中不能有空格 ...

  2. Ubuntu 服务器上面--安装和配置mysql 【转】

    更新源列表 打开"终端窗口",输入"sudo apt-get update"-->回车-->"输入root用户的密码"--> ...

  3. 动态SQL之、条件判断(转)

    错误方式一: 在mybatis的动态sql语句中使用<if>标签可以判断sql中的条件是否成立. <select id="getPerson" resultTyp ...

  4. python之OpenCv(三)---基本绘图

    opencv 提供了绘制直线.圆形.矩形等基本绘图的功能 1.绘直线 cv2.line(画布,起点坐标,终点坐标,颜色,宽度) 例如: cv2.line(image,(20,60),(300,400) ...

  5. JS兼容问题

    //1.滚动条到顶端的距离 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //2.滚动条 ...

  6. Mac新手必看教程—让你离熟练操作mac只差十分钟

    本文收录于:风云社区(提供各类mac软件资源下载) 本文源自:什么值得买 无论轻薄办公本.还是赶超台式性能的游戏本,关注#笔记本攻略#栏目,解决笔记本电脑从选购到使用的各种问题. 引子 大部分用户接触 ...

  7. python格式化输出的几种方式

    第一种  字符串拼接  就不写了 下面的是 第二 第三 第四种 name = input("name:") age = int(input("age:")) p ...

  8. 1.1浅谈Spring(一个叫春的框架)

    如今各种Spring框架甚嚣尘上,但是终归还是属于spring的东西.所以在这里,个人谈一谈对spring的认识,笔者觉得掌握spring原理以及spring所涉及到的设计模式对我们具有极大的帮助.我 ...

  9. saltstack主机管理项目:计主机管理项目命令分发器(三)

    一.开发目标命令格式如下: 二.目录结构 三.代码注解 01.salt.py 只是一个入口,没干什么事情 #!/usr/bin/env python # -*- coding:utf-8 -*- # ...

  10. 基于ionic4、cordova搭建android开发环境

    前颜(yan)最近公司有一个项目需求是利用h5进行跨平台开发,这里所说的跨平台开发指的是:将h5代码利用某种方式或工具环境进行打包,最后生成android的apk以及ios的ipa. 本文只讲解and ...