javascript - 无法在 ReactJS 前端显示圆形元素

Question

我正在创建 ReactJS 前端，我想从 App.js 中绘制 4 个圆圈:

<span className="dot">Option 1</span>
<span className="dot">Option 2</span>
<span className="dot">Option 3</span>
<span className="dot">Option 4</span>

这是App.css中的一个circle类的定义:

.dot {
  height: 25px;
  width: 25px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}

但是，当我启动应用程序时，我只看到没有圆圈的文本Option 1、Option 2 等。

更新:

下面我给出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 = {
      fullname: "",
      emailaddress: "",
      password: "",
      editor: "",
      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-9">
              <form className="form" onSubmit={this.fetchData}>
                <div className="field">
                  <label className="label">Name</label>
                  <div className="control">
                    <input
                      className="input"
                      type="text"
                      name="fullname"
                      value={this.state.fullname}
                      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="emailaddress"
                      value={this.state.emailaddress}
                      onChange={this.handleChange}
                    />
                  </div>
                </div>

                <div className="field">
                  <label className="label">Password</label>
                  <div className="control">
                    <input
                      className="input"
                      type="password"
                      name="password"
                      value={this.state.password}
                      onChange={this.handleChange}
                    />
                  </div>
                </div>

                <div className="field">
                  <label className="label">Pick your editor</label>
                  <div className="control">
                    <div className="select">
                      <select
                        value={this.state.editor}
                        name="editor"
                        onChange={this.handleChange}
                      >
                        <option value="vscode">VsCode</option>
                        <option value="atom">Atom</option>
                      </select>
                    </div>
                  </div>
                </div>

                <div className="field">
                  <label className="label">What do you like about React</label>
                  <div className="control">
                    <textarea
                      className="textarea"
                      name="message"
                      value={this.state.message}
                      onChange={this.handleChange}
                    />
                  </div>
                </div>

                <div className="field">
                  <div className="control">
                    <label className="checkbox">
                      <input
                        name="terms"
                        type="checkbox"
                        checked={this.state.terms}
                        onChange={this.handleChange}
                      />
                      I agree to the{" "}
                      <a href="https://google.com">terms and conditions</a>
                    </label>
                  </div>
                </div>

                <div className="field">
                  <div className="control">
                    <label className="label">
                      Do you test your React code?
                    </label>
                    <label className="radio">
                      <input
                        type="radio"
                        name="test"
                        onChange={this.handleChange}
                        value="Yes"
                        checked={this.state.test === "Yes"}
                      />
                      Yes
                    </label>
                    <label className="radio">
                      <input
                        type="radio"
                        name="test"
                        onChange={this.handleChange}
                        value="No"
                        checked={this.state.test === "No"}
                      />
                      No
                    </label>
                  </div>
                </div>

                <div className="field">
                  <div className="control">
                    <input
                      type="submit"
                      value="Submit"
                      className="button is-primary"
                    />
                  </div>
                </div>
              </form>
            </div>
            <div className="column is-3">
              <pre>
                <code>
                  <p>Full Name: {this.state.prediction}</p>
                  <p>Email Address: {this.state.emailaddress}</p>
                  <p>Password: {this.state.password}</p>
                  <p>Choice in Editor: {this.state.editor}</p>
                  <p>Why React: {this.state.message}</p>
                  <p>Terms and Condition: {this.state.terms}</p>
                  <p>Do you test?: {this.state.test}</p>
                </code>
              </pre>
            </div>

            <span className="dot">AAAAAA</span>
            <span className="dot">BBBBBB</span>
            <span className="dot">CCCCCC</span>
            <span className="dot">DDDDDD</span>

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

App.css完整代码:

@import url(https://fonts.googleapis.com/css?family=Roboto:700,300);
body {
        background-color: #333;
}

.App {
        font-size: 1em;
        font-weight: 300;
}

.App {
        font-family: "Roboto", arial, sans-serif;
        color: #fefefe;
        border-style: solid;
        border-width: 10px;
        border-color: rgb(254, 254, 254);
        border-radius: 10px 10px 10px 10px;
        background-image: -moz-linear-gradient( -90deg, rgb(236, 111, 102) 0%, rgb(243, 161, 131) 100%);
        background-image: -webkit-linear-gradient( -90deg, rgb(236, 111, 102) 0%, rgb(243, 161, 131) 100%);
        background-image: -ms-linear-gradient( -90deg, rgb(236, 111, 102) 0%, rgb(243, 161, 131) 100%);
        width: 90%;
        min-width: 60%;
        max-width: 70%;
        margin: 0 auto;
        padding: 25px;
}

.App form {
        margin: 0 auto;
        text-align: center;
}

.App .container {
        margin: 10px;
}

.container {
        width: 100%;
        margin-top: 50px;
        position: relative;
        text-align: center;
}

.App input[type="text"],
.App input[type="number"],
.App input[type="password"],
.App input[type="textarea"],
.App input[type="submit"]:focus {
        outline: 0;
}

.App input[type="text"],
.App input[type="number"],
.App input[type="password"] {
        font-weight: 700;
        font-size: 1.4em;
        padding: 10px;
        border-width: 2px;
        border-color: rgba(247, 247, 247, .3);
        border-style: solid;
}

.App input[type="text"]:focus,
.App input[type="number"]:focus,
.App input[type="password"]:focus {
        background: white;
        transition: all 0.3s ease;
        color: #222;
}

.App input[type="radio"] {
        -webkit-appearance: none;
        background-color: #fefefe;
        display: inline-block;
        position: relative;
        padding: 6px;
        margin-left: -6px;
        margin-top: 25px;
        cursor: pointer;
}

.App input[type="submit"] {
        font-weight: 700;
        font-size: 1.8em;
        color: #111;
        background: #fefefe;
        box-shadow: 0px 4px 0px 0px #d26a60;
        border-style: none;
        padding: 10px 50px;
        margin: 25px 0 15px 0;
        position: relative;
        display: inline-block;
        transition: all .1s linear;
}

.App input[type="submit"]:active {
        box-shadow: 0 2px 0 #d26a60;
        transform: translateY(3px);
        -webkit-transform: translateY(3px);
        -ms-transform: translateY(3px);

.dot {
    border: 1px solid;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  display: inline-block;
}
}

Answer 1

您在 .App input[type="submit"]:active 规则中定义了您的 .dot 类。

.App input[type="submit"]:active {
  box-shadow: 0 2px 0 #d26a60;
  transform: translateY(3px);
  -webkit-transform: translateY(3px);
  -ms-transform: translateY(3px);

  .dot {
    border: 1px solid;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: inline-block;
  }
}

将 .dot 类移到它之外:

.App input[type="submit"]:active {
  box-shadow: 0 2px 0 #d26a60;
  transform: translateY(3px);
  -webkit-transform: translateY(3px);
  -ms-transform: translateY(3px);
}

.dot {
  border: 1px solid;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  display: inline-block;
}