Question

这只是一个简单的切换机制：

元素的单击是通过响应状态更改来切换边框颜色更改。它改变了颜色一次！但不会切换回原来的颜色。

（我已经尝试了很多功能的变体，读取/重读状态的React文档，setState的异步/批量更改功能，并反复梳理SO。）

有人可以帮我找到解决方案吗？

提前致谢！

import React, { Component } from 'react';

class Button extends Component {
  constructor(props) {
    super(props);
    this.state = {
      active: false,
    }
    this.updateActive = this.updateActive.bind(this);
  }



 updateActive(){
    this.setState(function(){
      this.state.active = !this.state.active;
      { return this.state.active; }
    });
  }

  render(){
    return (
      <div className="seq_btn" onClick={this.updateActive} style={ {borderColor: this.state.active ? 'black' : 'rgb(193, 255, 112)' }}></div>
    )
  }
}

export default Button;

Answer 1

因为您的返回语法不正确：

this.setState(function(){
  this.state.active = !this.state.active;
  { return this.state.active; }
});

这应该是：

this.setState(function(){
  return { active: !this.state.active };
});

但是，您根本不需要在此处使用回调。你应该只使用新数据setState。

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

Answer 2

作为一个好习惯，你应该永远以任何不用setState直接执行的形式改变状态

即使使用

this.state.active = !this.state.active

是糟糕的形式，很可能是你的问题。

而是考虑

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

另外要了解setState可以进行批处理以便稍后处理，它们并不总是立即执行。

setState（）并不总是立即更新组件。它可以批量推迟更新或推迟更新。

https://reactjs.org/docs/react-component.html#setstate

如下所述，功能组件可以实现相同的目的，而无需生命周期方法的开销

import React from "react";

const Button = ({ active, clickAction }) => (
    <div onClick={clickAction} className={{ borderColor: active ? "green": "purple"}}>
</div>);

export default Button;

React：为什么元素样式不能用setState切换？

2 个答案: