0

新手来了

我刚开始在代码沙盒上玩 ReactJS。我想将图像元素（绿色箭头）保持在仪表元素上方的特定位置。我尝试了我能想到的最简单的方法，它有点适合我的需要，但是......当我打开页面时，图像放错了位置，但是如果我刷新页面，图像就会正好在我想要的位置它……为什么？！可能是什么原因以及如何解决它的任何想法？也许，您能告诉我将图像定位在 div 内特定位置的任何其他方式吗？

这是链接：https ://codesandbox.io/embed/gauge-ship-engine-1-h2nhx?fontsize=14&hidenavigation=1&theme=dark&codemirror=1

这是代码：

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import ReactSpeedometer from "react-d3-speedometer";
import "bootstrap/dist/css/bootstrap.min.css";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import arrow from "./greenarrow.png";

class Gauge extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: ""
    };

    this.handleGaugeValueChange = this.handleGaugeValueChange.bind(this);
  }

  handleGaugeValueChange(e) {
    console.log(1);

    this.setState({
      value: e.target.value
    });
  }

  render() {
    return (
      <div className="center">
        <h1 className="title">Ship Engine 1</h1>

        <Container className="p-3">
          <Row>
            <Col>
              <div
                className="speedometer"
                style={{
                  width: "100%",
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center"
                }}
              >
                <img
                  src={arrow}
                  alt="greenarrow"
                  style={{
                    position: "absolute",
                    opacity: 1,
                    zIndex: "1",
                    transform: "rotate(-35deg)",
                    marginLeft: "-65px",
                    marginTop: "-80px"
                  }}
                />

                <ReactSpeedometer
                  maxValue={150}
                  ringWidth={20}
                  customSegmentStops={[0, 30, 55, 65, 90, 120, 150]}
                  segmentColors={[
                    "#FAFAFA",
                    "#FAFAFA",
                    "#007fff",
                    "#FAFAFA",
                    "#FAFAFA",
                    "#FAFAFA"
                  ]}
                  needleHeightRatio={0.72}
                  valueTextFontSize="19px"
                  needleTransitionDuration={9000}
                  needleTransition="easeElastic"
                  currentValueText="${value} kW"
                  value={this.state.value}
                />
              </div>
              <div className="divLabelReq">
                <label
                  className="labelReq"
                  htmlFor="value"
                  style={{ color: "#6b6964" }}
                >
                  Requested: 39.7kW
                </label>
              </div>
            </Col>
            <Col>
              <form className="form-settings" onSubmit={this.handleSubmit}>
                <div className="form-row">
                  <div className="form-group col-md-5">
                    <label
                      className="label"
                      htmlFor="value"
                      style={{ color: "white" }}
                    >
                      Change Gauge Value:{" "}
                    </label>
                    <input
                      type="number"
                      className="form-control"
                      name="value"
                      id="value"
                      placeholder="0"
                      onChange={this.handleGaugeValueChange}
                      value={this.state.keywords}
                    />
                  </div>
                </div>
              </form>
            </Col>
          </Row>
        </Container>
      </div>
    );
  }
}

export default Gauge;

const rootElement = document.getElementById("root");
ReactDOM.render(<Gauge />, rootElement);

提前致谢！

4

1 回答 1

0

看起来你的绿色箭头没有参考。例如父元素没有声明一个位置。尝试类似：

         <div
            className="speedometer"
            style={{
              width: "100%",
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
              position: "relative"
            }}
          >
于 2019-12-15T01:03:49.530 回答