状态不会变回

Question

我的页面上有一个搜索输入。我想在搜索长度等于或大于1的时候改变颜色(从银色到绿色)。这个代码有点问题。现在有两个问题: 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;

Answer 1

1) changeColor.length > 1 -这意味着'2或更大‘。如果需要'1或更大‘-请使用> 0或>= 1

2)您曾一次将变量change value设置为'bg-light-green‘。使用change = change不会做任何事情(将var赋值给self)。

尝试：

change = (changeColor.length >= 1) ? 'bg-light-green' : 'bg-silver';

Answer 2

你需要在这里改变两件事：

1. change = (changeColor.length >= 1) ? 'bg-light-green' : 'bg-silver';
2. In your handleClick () - change setState with this

this.setState({ isToggleOn：!this.state.isToggleOn });