如何在 React JS 中使用按钮 onClick 更改按钮内的背景和文本颜色

Question

我是 React JS 的新手。我正在使用 React-bootstrap 创建一个简单的网页。单击按钮时，我需要更改标题颜色和文本颜色以及背景颜色。例如，当我点击绿色按钮，它将在绿色背景中将标题颜色更改为深绿色，将文本部分更改为浅绿色。我应该添加什么代码来管理它？

这是我的代码

    import React, { Component } from 'react';



    class Page extends Component {

    render() {

        return (
            <div>

                <div style={{ background: "#f0f0f0f" }}>
                    <h3 style={{ color: 'Black' }}>Heading</h3>
                    <p style={{ color: '#706c61' }}> This is a text... </p>
                </div>
                
                    <div>
                        <button> White </button>
                        <button> Purple </button>
                        <button> Red </button>
                        <button> Green </button>
                    </div>
               
            </div>
        );
    }
}

export default Page;

Answer 1

将颜色存储在如下状态：

this.state = { heading: "Black" };

然后将它们分配给元素：

  <h3 style={{ color: this.state.heading }}>Heading</h3>

然后你可以通过按钮的onClick事件来改变它：

<button onClick={() => this.setState({ heading: "green" })}>
            {" "}
            Green{" "}

sandbox

Answer 2

您可以使用状态来动态控制颜色。

import React, { Component } from 'react';



class Page extends Component {
 constructor(props){
   super(props);
   this.state={color:"black"}
}
    render() {

        return (
            <div>

                <div style={{ background: "#f0f0f0f" }}>
                    <h3 style={{ color: this.state.color }}>Heading</h3>
                    <p style={{ color: '#706c61' }}> This is a text...</p>
                </div>
                
                    <div>
                        <button onClick={()=>this.setState({color:"white"})}> White </button>
                        <button  onClick={()=>this.setState({color:"purple"})}> Purple </button>
                        <button  onClick={()=>this.setState({color:"red"})}> Red </button>
                        <button  onClick={()=>this.setState({color:"green"})}> Green </button>
                    </div>
            </div>
        );
    }
}

export default Page;

沙盒 - Link

如何在 React JS 中使用按钮 onClick 更改按钮内的背景和文本颜色

How to change the background and text color within button using button onClick in React JS

buttonclick

reactjs

react-class-based-component