如何使用react中的setSate更改按钮背景颜色和文本颜色？

Question

我正在尝试使用react中的setState来更改按钮的背景颜色和文本颜色。

这是App.js

import React, { Component } from 'react';


export default class App extends Component {
  changeColor = () => {
    this.setState({
      background: 'red'
    })
  }
  render() {
    return (
      <div className='text-center pt-5'>
        <button onClick= {this.changeColor} className='btn btn-danger'>Click here</button>
      </div>
    )
  }
}

Answer 1

您需要初始化状态并绑定函数：

constructor(props) {
  super(props);
  this.state = { background: 'blue', textColor: 'pink' };
  this.changeColor = this.changeColor.bind(this);
}

您需要通过state访问颜色，并将其设置为style属性。

<button style={{ backgroundColor: this.state.background, color: this.state.textColor }} onClick={this.changeColor} className='btn btn-danger'>Click here</button>

另外，更新您的changeColor方法以处理文本颜色：

changeColor = () => {
  this.setState({
    background: 'red',
    textColor: 'orange'
  });
}