Невозможно увидеть CSS изменений, внесенных в исходный модуль - PullRequest
Новая
       78

Невозможно увидеть CSS изменений, внесенных в исходный модуль

0 голосов
/ 15 марта 2020

Я работаю над проектом с открытым исходным кодом, но не могу увидеть изменения, внесенные в исходное приложение. Файл css, поскольку он включает приложение test-sever. Файл css, следовательно, я не могу см. изменения, внесенные в поле ввода, как я могу включить изменения, сделанные в исходном модуле.

Приложение. css файл: 

.error {
  border: red 2.7px solid;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
   margin: 0;

}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;



}

.error-display{
  color: red;
  font-size: 14px;
}

.input[type=number]
{
  text-align: center;
  margin-top: 40px;

  padding: 12px 20px;
  margin: 21px 10px;


  box-shadow:inset 0 0 5px 5px #888;

}

index. js файл : 

import React, { Component } from "react";
import axios from "axios";
import "./App.css";
class Pincode extends Component {
  constructor(props) {
    super(props);

    this.state = {
      pincode: "",
      city: "",
      state: "",
      error: ""
    };
  }
  onChange(e) {
    this.setState({ [e.target.name]: e.target.value });
    if (e.target.value.length === 6) {
      this.setState({
        error: ""
      });
      axios
        .get(`https://api.postalpincode.in/pincode/${e.target.value}`)
        .then(res =>
          this.setState({
            state: res.data[0].PostOffice[0].State,
            city: res.data[0].PostOffice[0].District
          })
        )
        .then(() => {
          document.getElementById("pincode").classList.remove("error");
        })
        .catch(err => {
          document.getElementById("pincode").className = "error";
          this.setState({
            error: "Invalid PIN Code"
          });
        });
    }
    if (e.target.value.length !== 6) {
      this.setState({
        city: "",
        state: "",
        error: "ZIP code must be of 6 digits"
      });
    }
  }
  render() {
    return (
      <div style={this.props.Container}>
        {this.state.error ? (
          <span className="error-display">{this.state.error}</span>
        ) : null}
        <div style={this.props.pincodeContainer}>
          <input
            maxLength={6}
            minLength={6}
            onChange={e => this.onChange(e)}
            name="pincode"
            placeholder="Pin Code"
            value={this.state.pincode}
            id="pincode"
            type="number"
            style={this.props.pincodeInput}
          />
        </div>
        <div style={this.props.cityContainer}>
          <input
            type="String"
            disabled={true}
            placeholder="City"
            value={this.state.city}
            style={this.props.cityInput}
          />
        </div>
        <div style={this.props.stateContainer}>
          <input
            type="String"
            placeholder="State"
            disabled={true}
            value={this.state.state}
            style={this.props.stateInput}
          />
        </div>
      </div>
    );
  }
}
export default Pincode;

Вместо приложения. css из папки sr c включается файл app. css с тестового сервера: 

.App {
  text-align: center;
  margin-top: 40px;
}
...