2

我是 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;
4

2 回答 2

2

将颜色存储在如下状态：

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

然后将它们分配给元素：

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

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

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

沙盒

于 2021-03-25T09:27:39.450 回答
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;

沙盒 -链接

于 2021-03-25T09:29:09.560 回答