Question

是否可以使用onClick功能上的多个按钮更改背景颜色？

此代码将同时更改两个按钮（init为黑色）颜色。

我想要点击的按钮改变颜色但另一个按钮不会改变。

ex.First，Btn1 black，btn2 black

然后我点击btn1，btn1 white btn2 black，

然后我点击btn2，btn1 white，btn2 white。

然后我点击btn2，btn1 white，btn2 black。

class Test extends React.Component {
    constructor(){
    super();


    this.state = {
        color_black: true
      }
    }

    changeColor(){
            this.setState({color_black: !this.state.color_black})
    }
        render(){
        let bgColor = this.state.color_black ? "black" : "white"
        return (
        <div>
            <button style={{backgroundColor: bgColor}} onClick={this.changeColor.bind(this)}>Button1</button>

            <button style={{backgroundColor: bgColor}} onClick={this.changeColor.bind(this)}>Button2</button>
        </div>
      )
    }
}

React.render(<Test />, document.getElementById('container'));

Answer 1

最好的解决方案是将按钮放在单独的课程中。由于他们每个人都将管理自己的状态。通过这种方式，您可以处理链接时的多个按钮，按下时每个按钮都会改变它的颜色。

/*
 * A simple React component
 */
class Button extends React.Component {   
    constructor(props){
        super(props); 
        this.state = {
            color_black: true
        }
        this.changeColor = this.changeColor.bind(this);
    }

    changeColor(){
        this.setState({color_black: !this.state.color_black})
    }

    render(){
        let bgColor = this.state.color_black ? "black" : "white"
        return (
            <div>
                <button style={{backgroundColor: bgColor}} onClick={this.changeColor}>Button1</button>
            </div>
        );
    }
}


class Application extends React.Component {
    render(){
        return (
            <div>
                <Button/>
                <Button/>
            </div>    
        );
    }
}
/*
 * Render the above component into the div#app
 */
React.render(<Application />, document.getElementById('app'));

Answer 2

   enter code here
    state = {
        btn1:true
    }
    switchBtn(btn) {
        if(btn ==="btn1"){
            this.setState({
                btn1:true,
                btn2:false
            })
        
        }
        else {
            this.setState({
                btn1:false,
                btn2:true
            })

        }
    }


<span className="optionBtn" id={this.state.btn1 && "switchCssBtn"} onClick={() => this.switchBtn("btn1")}>Questions</span>
                            <span className="optionBtn"  id={this.state.btn2 && "switchCssBtn"} onClick={() => this.switchBtn("btn2")} >Headings</span>

 #switchCssBtn {
        background: #FFFFFF;
        border-radius: 8px;
        font-weight: bold;
        font-size: 13px;
        line-height: 16px;
        text-align: center;
        color: #7548A8;
        border: 1px solid #9ba2b7;
    }

React在点击时更改两个按钮的样式

2 个答案: