- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的页面上有一个搜索输入。每当搜索长度等于或大于 1 时,我想更改颜色(从银色到绿色)。此代码有点损坏。现在有2个问题:1) 搜索长度等于或大于2后变色。
2) 当我清除我在搜索字段中输入的任何内容后搜索字段为空时,它不会恢复为原始颜色(银色)。
求助!
export let change = 'bg-silver';
class Card extends Component {
constructor({props, name, id, changeColor, change}) {
super(props, name, id, changeColor, change);
this.state = {
isToggleOn: true,
name: name,
id: id,
changeColor: changeColor,
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
const { name, id, changeColor, isToggleOn} = this.state;
(changeColor.length > 1) ? change = 'bg-light-green'
: change = change;
return (
isToggleOn ?
<a style={{width: 200, height: 250}} className={'tc ' + change + ' dib br3 ma2 pa2 grow bw2 shadow-5'} onClick={this.handleClick}>
<h2 className='f6 measure-narrow lh-copy'>{name}</h2>
</a>
: <div style={{width: 200, height: 250}} className='flex-wrap justify-center bg-light-green dib v-top ma2 br3 pa2 bw2 grow shadow-5' onClick={this.handleClick}>
<p className='tc f6 measure-narrow lh-copy bg-silver br3 pa1 dib ma2 bw2 shawdow-5' >Hello, My name is <strong>{name}</strong><br/>
How are you?</p>
</div>
);
}
}
export default Card;
最佳答案
1) changeColor.length > 1
- 这意味着“2 或更大”。如果您想要“1 或更大”- 使用 > 0
或 >= 1
2) 您已将变量更改值设置为“bg-light-green”一次。使用 change = change
不会做任何事情(将 var 分配给 self)。
尝试:
change = (changeColor.length >= 1) ? 'bg-light-green' : 'bg-silver';
关于javascript - 状态不改回来,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49690707/
我试图理解基数排序,但在理解实现实际代码时改 rebase 数时遇到问题。这是我用来学习基数排序的代码,我会尝试解释我不明白的地方。 此代码由 GeeksForGeeks 提供: // C++ imp
话不多说,请看代码: ? 1
本文实例讲述了mysql语句实现简单的增、删、改、查操作。分享给大家供大家参考,具体如下: 1、创建db_shop数据库,如果该数据库不存在则创建 ?
使用oracle触发器 实现对某个表的增改删的监控操作,并记录到另一个表中。 代码: 复制代码代码如下: create or replace trigger test_trigge
java连接数据库增、删、改、查工具类 数据库操作工具类,因为各厂家数据库的分页条件不同,目前支持Mysql、Oracle、Postgresql的分页查询 在Postgresql环境测试过了,其他
1、修改数据 复制代码代码如下: DataRow dr =
注册表可以用来进行存储一些程序的信息,例如用户的权限、或者某些值等,可以根据个人需要进行存储和删减。 当前注册表主目录: 引用包 Wesky.Net.OpenTools 1.0.5或
是否可以将 pdf 页面的页眉更改为与当前所选书签同名的名称?我正在为我的 pdf 生成使用 Flying Saucer 。你能举个例子吗?提前致谢。 最佳答案 这对我适用于 flyingsaucer
好家伙,写后端,这多是一件美逝. 关于这个项目的代码前面的博客有写 我的第一个独立项目 - 随笔分类 - 养肥胖虎 - 博客园 (cnblogs.com
准备工作: 增、删、改、查的方法有很多很多种,这里只展示出常用的几种。 ?
需要5个类: 1.实体类:Person.java 2.抽象类:SQLOperate.java(封装了对数据库的操作) 3.助手类:DBOpenHelper.java(继承SQLiteOpenH
首先是是一个简单的例子,单链表的建立和输出。 程序1.1 复制代码 代码如下: #include<iostream> #include<string> using na
数据库操纵基本流程为: 1、连接数据库服务器 2、选择数据库 3、执行SQL语句 4、处理结果集 5、打印操作信息 其中用到的相关函数有 •resource m
我需要为 iPad 和 iPhone 设置不同颜色的标签,我知道我们可以为不同的尺寸类别更改字体大小,但是有什么方法可以根据尺寸类别的值设置不同的颜色 我知道有可用的代码解决方案,但我想知道 size
假设我有一个物体相对于相机的坐标 X、Y、Z 和方向 Rx、Ry、Rz。此外,我有这个相机在世界上的坐标 U、V、W 和方向 Ru、Rv、Rw。 如何将对象的位置(位置和旋转)转换为其在世界中的位置?
CRUD是Create(创建)、Read(读取)、Update(更新)和Delete(删除)的缩写,它是普通应用程序的缩影。如果您掌握了某框架的CRUD编写,那么意味可以使用该框架创建普通应用程序了
项目结构: 添加页面: &
本文实例讲述了android操作sqlite数据库(增、删、改、查、分页等)及listview显示数据的方法。分享给大家供大家参考,具体如下: 由于刚接触android开发,故此想把学到的基础知识
总括 pandas的索引函数主要有三种: loc 标签索引,行和列的名称 iloc 整型索引(绝对位置索引),绝对意义上的几行几列,起始索引为0 ix 是 iloc 和 loc的合体 at
我是一名优秀的程序员,十分优秀!