gpt4 book ai didi

javascript - 状态不改回来

转载 作者:行者123 更新时间:2023-11-30 11:21:28 25 4
gpt4 key购买 nike

我的页面上有一个搜索输入。每当搜索长度等于或大于 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com