javascript - CSS 元素的颜色未正确更改

Question

我想根据 JavaScript (ReactJS) 中变量 {this.state.prediction} 的值来切换圆圈的颜色。下面是我的代码。

问题是圆圈的颜色没有正确切换。例如，让 {this.state.prediction} 等于 0。在这种情况下，我希望第一个圆是黑色的(类 circleSelected)，而其他的应该是白色的(class circle)。

但是，它不起作用。加载页面时，第一个圆圈闪烁并从黑色快速切换为白色。因此，对于我的示例(当 {this.state.prediction} 等于 0 时)

，所有圆圈都是白色的而不是 black-white-white

<div className="column is-7">
    <pre>
       <div className="circle-content">
           <div className={this.state.prediction === 0 ? "circleSelected" : "circle"}></div>
            <p>[0 - 5]</p>
       </div>
       <div className="circle-content">
            <div className={this.state.prediction === 1 ? "circleSelected" : "circle"}></div>
            <p>(5 - 15]</p>
       </div>
       <div className="circle-content">
            <div className={this.state.prediction === 2 ? "circleSelected" : "circle"}></div>
            <p>(15 - 30]</p>
       </div>
    </pre>
</div>

CSS:

.circle-content {
    width:20%;
    text-align:center;
    float:left;
}

.circle {
    display:inline-block;
    width:20%;
    padding-bottom:20%;
    border-radius:60%;
    background: #fff;
    border:1px solid #000;
}

.circleSelected {
    display:inline-block;
    width:20%;
    padding-bottom:20%;
    border-radius:60%;
    background: #000;
    border:1px solid #000;
}

.circle-content p {
    font-size:14px;
    color:#fff;
}

编辑:

整个 React 组件(App.js):

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      plannedturnd: "",
      dephour: "",
      taxiin: "",
      addasma60: "",
      message: "",
      terms: false,
      test: ""
    };

    this.handleChange = this.handleChange.bind(this);
    //this.handleSubmit = this.handleSubmit.bind(this);
  }

  componentWillMount() {
      this.fetchData();
  }

  fetchData = () => {
      fetch("http://localhost:8000", {
        method: "GET",
        dataType: "JSON",
        headers: {
          "Content-Type": "application/json; charset=utf-8",
        }
      })
      .then((resp) => {
        return resp.json()
      })
      .then((data) => {
        this.setState({ prediction: data.prediction })
        console.log(data.prediction, "data content")
      })
      .catch((error) => {
        console.log(error, "catch the hoop")
      })
  }

  handleChange(event) {
    const target = event.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  // handleSubmit(event) {
  //   event.preventDefault();
  //   console.log(this.state);
  // }

  render() {
    return (
      <div className="App">
        <header>
          <div className="container">
            <nav className="navbar">
              <div className="navbar-brand">
                <span className="navbar-item">Forms in React</span>
              </div>
            </nav>
          </div>
        </header>
        <div className="container">
          <div className="columns">
            <div className="column is-2">
              <form className="form" onSubmit={this.fetchData}>
                <div className="field">
                  <label className="label">Planned turnaround time (minutes)</label>
                  <div className="control">
                    <input
                      className="input"
                      type="number"
                      min={0}
                      max={120}
                      name="plannedturnd"
                      value={this.state.plannedturnd}
                      onChange={this.handleChange}
                    />
                  </div>
                </div>

                <div className="field">
                  <label className="label">Departure hour [0-23]</label>
                  <div className="control">
                    <input
                      className="input"
                      type="number"
                      min={0}
                      max={23}
                      name="dephour"
                      value={this.state.dephour}
                      onChange={this.handleChange}
                    />
                  </div>
                </div>

                <div className="field">
                  <label className="label">Taxi In time (minutes)</label>
                  <div className="control">
                    <input
                      className="input"
                      type="number"
                      min={0}
                      max={20}
                      name="taxiin"
                      value={this.state.taxiin}
                      onChange={this.handleChange}
                    />
                  </div>
                </div>

                <div className="field">
                  <label className="label">Additional ASMA time (minutes)</label>
                  <div className="control">
                    <input
                      className="input"
                      type="number"
                      min={0}
                      max={20}
                      name="addasma60"
                      value={this.state.addasma60}
                      onChange={this.handleChange}
                    />
                  </div>
                </div>

                <div className="field">
                  <div className="control">
                    <input
                      type="submit"
                      value="Predict"
                      className="button is-primary"
                    />
                  </div>
                </div>
              </form>
            </div>

            <div className="column is-7">
              <pre>
                <div className="circle-content">
                    <div className={this.state.prediction === 0 ? "circleSelected" : "circle"}></div>
                    <p>[0 - 5]</p>
                </div>
                <div className="circle-content">
                    <div className={this.state.prediction === 1 ? "circleSelected" : "circle"}></div>
                    <p>(5 - 15]</p>
                </div>
                <div className="circle-content">
                    <div className={this.state.prediction === 2 ? "circleSelected" : "circle"}></div>
                    <p>(15 - 30]</p>
                </div>
                <div className="circle-content">
                    <div className={this.state.prediction === 3 ? "circleSelected" : "circle"}></div>
                    <p>(30 - 60]</p>
                </div>
                <div className="circle-content">
                    <div className={this.state.prediction === 4 ? "circleSelected" : "circle"}></div>
                    <p>greater than 60</p>
                </div>
              </pre>
            </div>

          </div>
        </div>
      </div>
    );
  }
}

export default App;

Answer 1

您的代码看起来是正确的，但您必须确保您在请求响应中得到的预测是一个数字。

class App extends Component {
  // ...

  fetchData = () => {
    fetch("http://localhost:8000")
      .then(resp => resp.json())
      .then(data => {
        this.setState({ prediction: Number(data.prediction) });
      })
      .catch(error => {
        console.log(error, "catch the hoop");
      });
  };

  // ...
}