Question

我正在尝试将页面的背景颜色更改为三种颜色中的一种，每种颜色都有一个相应的按钮。 onClick函数按钮应该调用一个函数来改变颜色，但由于某种原因它不起作用，而最后一个按钮是在第一次加载时设置页面的背景颜色。为什么是这样？以下代码无效。

class Game extends React.Component
{
     setBgColor(bgColor)
     {
         document.body.style.backgroundColor = bgColor;
     }

  render()
  {
    return(
        <div id = "buttonWrapper">
            <button id = "redButton" onClick = {this.setBgColor("red")}>RED</button>
            <button id = "greenButton" onClick = {this.setBgColor("green")}>GREEN</button>
            <button id = "blueButton" onClick = {this.setBgColor("blue")}>BLUE</button>
        </div>
    );
  }

提前谢谢。

Answer 1

@ Mickael-conner，请使用以下代码为onClick事件定义函数：

class Game extends React.Component
{
     setBgColor(bgColor)
     {
         document.body.style.backgroundColor = bgColor;
     }

  render()
  {
    return(
        <div id="buttonWrapper">
        <button id="redButton" onClick={() => this.setBgColor("red")}>RED</button>
        <button id="greenButton" onClick={() => this.setBgColor("green")}>GREEN</button>
        <button id="blueButton" onClick={() => this.setBgColor("blue")}>BLUE</button>
      </div>
    );
  }

以下文章解释了在React组件中定义函数的不同方法：

http://www.ign.com/

jsReact麻烦渲染onClick

1 个答案: