Question

我的页面上有搜索输入。我想在搜索长度等于或大于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;

Answer 1

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';

Answer 2

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

change = (changeColor.length >= 1) ? 'bg-light-green' : 'bg-silver';
在handleClick () - 使用此
更改setState

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

国家不会改变

2 个答案: