时间戳

首页 > 解决方案 > 如何更改 React JS 中单击按钮的颜色？

javascript - 如何更改 React JS 中单击按钮的颜色？

问题描述

我做了一个简单的计算器，我想在点击时更改按钮的背景颜色。我想在handleClick函数中有代码，我在下面的代码中注释了我想改变颜色的地方。索引返回 +、-、* 或 /，具体取决于您单击的按钮以及单击时它会自动计算给定值并更改按钮颜色。

这是我的代码：

<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
<!-- REACT -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

<style>
    body {
        width: 400px;
        margin: auto
    }

    .box {
        border: 1px dashed #000;
        padding: 15px;
        background-color: #adbed8;
    }

    input[type="text"] {
        width: 200px;
    }

    button {
        background-color: #069;
        border-radius: 5px;
        color: #fff;
        margin-bottom: 5px;
        margin-right: 5px;
        padding: 5px 15px;
        border: none;
    }
</style>
    </head>

    <body>
<h3>Calculator</h3>
<div id="ratkaisu" class="box"></div>

<script type="text/babel">


    class Nelilaskin extends React.Component {

   constructor(props) {
       super(props);
       this.handleClick = this.handleClick.bind(this);
     }

     handleClick (index) {
       var myElements = document.querySelectorAll("button");
       // All buttons are color #069
       for (var i = 0; i < myElements.length; i++) {
           myElements[i].style.backgroundColor = "#069";
       }
       // Calculate the values
       this.refs.n3.value = eval(this.refs.n1.value + index + this.refs.n2.value);
       // I want to change the color here
     }

   render() {
       return (
         <div>
       <table>
       <tbody>
       <tr><td>Luku1:</td><td><input type="text" ref="n1" /></td></tr>
       <tr><td>Luku2:</td><td><input type="text" ref="n2" /></td></tr>
       <tr><td>Tulos:</td><td><input type="text" ref="n3" /></td></tr>
       <tr><td>Laske</td><td>
        <button onClick={this.handleClick.bind(this, "+")}>+</button>
        <button onClick={this.handleClick.bind(this, "-")}>-</button>
        <button onClick={this.handleClick.bind(this, "*")}>*</button>
        <button onClick={this.handleClick.bind(this, "/")}>/</button>
                  </td></tr>
       </tbody>
       </table>
         </div>
       );
     }
   }

   ReactDOM.render(
     <Nelilaskin />,
     document.getElementById('ratkaisu')
   );

   </script>

标签： javascriptreactjs

解决方案

在状态中设置一个属性；将按钮类型设置为单击时的属性值；有条件地为每个按钮在该属性周围呈现一个类名。

class Nelilaskin extends React.Component {

  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = {
      active: ''
    }
  }

  handleClick(index) {
    if (!this.refs.n1.value || !this.refs.n2.value) return;

    // Calculate the values
    this.refs.n3.value = eval(this.refs.n1.value + index + this.refs.n2.value);
    // I want to change the color here
    this.setState({
      active: index
    })
  }

  setActive(id) {

  }

  render() {
    return ( <
      div >
      <
      table >
      <
      tbody >
      <
      tr > < td > Luku1: < /td><td><input type="text" ref="n1" / > < /td></tr >
      <
      tr > < td > Luku2: < /td><td><input type="text" ref="n2" / > < /td></tr >
      <
      tr > < td > Tulos: < /td><td><input type="text" ref="n3" / > < /td></tr >
      <
      tr > < td > Laske < /td><td> <
      button className = {
        "+" === this.state.active ? "active" : ""
      }
      onClick = {
        this.handleClick.bind(this, "+")
      } > + < /button> <
      button className = {
        "-" === this.state.active ? "active" : ""
      }
      onClick = {
        this.handleClick.bind(this, "-")
      } > - < /button> <
      button className = {
        "*" === this.state.active ? "active" : ""
      }
      onClick = {
        this.handleClick.bind(this, "*")
      } > * < /button> <
      button className = {
        "/" === this.state.active ? "active" : ""
      }
      onClick = {
        this.handleClick.bind(this, "/")
      } > /</button >
      <
      /td></tr >
      <
      /tbody> < /
      table > <
      /div>
    );
  }
}

ReactDOM.render( <
  Nelilaskin / > ,
  document.getElementById('ratkaisu')
);
body {
  width: 400px;
  margin: auto
}

.box {
  border: 1px dashed #000;
  padding: 15px;
  background-color: #adbed8;
}

input[type="text"] {
  width: 200px;
}

button {
  background-color: #069;
  border-radius: 5px;
  color: #fff;
  margin-bottom: 5px;
  margin-right: 5px;
  padding: 5px 15px;
  border: none;
}

.active {
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<h3>Calculator</h3>
<div id="ratkaisu" class="box"></div>

推荐阅读