使用api

Question

我正在开发一个应用，其中 api将缩略图发送给裁剪器，用户应该能够通过按原始大小重新计算的度量值，例如要被“裁剪框”的图像宽度在图像缩略图上。原始像素与厘米的比例为12/1。 我的 width 状态乘以0.01，然后乘以toFixed（0），即我如何获得百分比，之后，我尝试乘以原始宽度除以12，再乘以fixed（0）。但程序每200cm裁剪一次。

class Crop extends React.Component {
  constructor(props) {
    super(props);
   this.state = {
    src: "",
    crop: {
      unit: "%",
      x: 25,
      y: 25,
      width: 50 * 0.01,
    }
  }
  };
  changeIt = (crop, percentCrop) => {
    console.log(this.state);
    this.setState({ crop: percentCrop });
  };

  setWidth = event => {
    this.setState({
      crop: {
        unit: "%",
        x: this.state.crop.x,
        y: this.state.crop.y,
        width: parseInt(event.target.value),
        height: this.state.crop.height
      }
    });
  };
  render(props) {
    const { widthOrigin} = this.props;
    const { classes } = this.props;
    return (
      <div className="crop">
        <div className="crop-left-side">
          {this.props.src && (
            <ReactCrop
              src={this.props.src}
              crop={this.state.crop}
              onChange={this.changeIt}
            />
          )}
          <div>Origin width: {(widthOrigin / 11.8).toFixed(0)}cm </div>
        <form
          className=""
          style={{ display: "flex", flexDirection: "row" }}
        >
          <div className="form_group">
            <p>Width</p>
            <input
              className={classes.rootinput}
              type="text"
              onChange={this.setWidth}
              value={(this.state.crop.width).toFixed(2) *  (widthOrigin).toFixed(0)}
            />
          </div>

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