Question

我希望这样做，以便当计数器大于10时，计数器文本的颜色变为红色和粗体。此代码不起作用，我想获得一些建议，在这里我可以做些不同的事情。 / p>

class Button1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      bgColor: ""
    };

    this.baseState = this.state;
  }

  bClick() {
    this.setState({
      count: this.state.count + 1
    });

    if (this.state.count > 10) {
      this.setState({
        bgColor: "red"
      });
    }
  }

  zeroing = () => {
    this.setState(this.baseState);
  };

  render() {
    return (
      <div>
        <button onClick={this.bClick.bind(this)}>Button1</button>
        <button onClick={this.zeroing}>Clear</button>
        <p>{this.state.count}</p>
      </div>
    );
  }
}

ReactDOM.render(<Button1 />, document.getElementById("root"));

Answer 1

只需基于计数更改类，就无需为此添加额外的变量：

bClick() {
  this.setState(state => ({
    count: state.count + 1,
  }));
}

render () {
  const { count } = this.state;

  return (
    <div>
      <button onClick={this.bClick.bind(this)}>Button1</button>
      <button onClick={this.zeroing}>Clear</button>
      <p className={count > 10 ? 'count-text--isOver10' : 'count-text'}>{this.state.count}</p>
    </div>
  );
}

然后根据自己的喜好设置样式，例如.count-text--isOver10 { background: red; color: white }。如果您愿意，也可以使用内联样式。

PS当您在setState中访问当前状态时，最好像我一样使用函数回调。

Answer 2

好吧，我确实自己找到了答案，没有把bgColor放在任何地方，这是答案：

render () {
            return (
                <div>
                    <button onClick = {this.bClick.bind(this)}>Nappula</button>
                    <button onClick = {this.nollaus}>Nollaus</button>                      
                    <p style={{ color: this.state.bgColor, fontWeight: this.state.fw}} >{this.state.count}</p>
                </div>
            )
        }

如果计数器超过10，如何更改文字颜色

2 个答案: