Javascript CSS元素的颜色不能正确更改

我想根据JavaScript（ReactJS）中变量

{this.state.prediction}

的值切换圆圈的颜色。下面是我的代码

问题是圆圈的颜色不能正确切换。例如，让我们假设

{this.state.prediction}

等于0。在这种情况下，我希望第一个圆圈是黑色的（class

circleSelected

），而其他圆圈应该是白色的（class

circle

）

但是，它不起作用。加载页面时，第一个圆圈会闪烁，并从黑色快速切换为白色。因此，在我的示例中，所有的圆都是白色的，而不是

黑白

（当

{this.state.prediction}

等于0时）

编辑：

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;

整个React组件（

App.js

）：

import React，{Component}来自'React'；
从“/logo.svg”导入徽标；
导入“/App.css”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
计划转向：“，
每小时：“，
滑行蛋白：“，
addasma60:“”，
消息：“”，
术语：假，
测试：“”
};
this.handleChange=this.handleChange.bind（this）；
//this.handleSubmit=this.handleSubmit.bind（this）；
}
组件willmount（）{
这是fetchData（）；
}
fetchData=（）=>{
取回（“http://localhost:8000", {
方法：“获取”，
数据类型：“JSON”，
标题：{
“内容类型”：“应用程序/json；字符集=utf-8”，
}
})
。然后（（resp）=>{
return resp.json（）
})
。然后（（数据）=>{
this.setState（{prediction:data.prediction}）
console.log（data.prediction，“数据内容”）
})
.catch（（错误）=>{
console.log（错误，“抓住环”）
})
}
手变（活动）{
const target=event.target；
const value=target.type==“checkbox”？target.checked:target.value；
const name=target.name；
这是我的国家({
[名称]：值
});
}
//handleSubmit（事件）{
//event.preventDefault（）；
//console.log（this.state）；
// }
render（）{
返回(
反应中的形式
计划周转时间（分钟）
出发时间[0-23]
及时滑行（分钟）
附加ASMA时间（分钟）
[0-5]

(五至十五)

(15-30)

（30-60）

大于60

);
}
}
导出默认应用程序；

您的代码看起来是正确的，但是您必须确保您在请求响应中得到的

预测是一个数字

你能包括你的整个React组件吗？你在响应你的请求时得到的数据是什么样子的？也许
prediction
是一个字符串而不是一个数字。@Thole:哦，你说得对！它确实是一个字符串。我想你想用componentDidMount而不是componentWillMount

.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;
}

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;

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");
      });
  };

  // ...
}