Html 在按钮一侧显示图像裁剪通知

我正在使用ReactJS，但这个成功通知功能并没有按预期工作。当我裁剪图像并单击确认裁剪按钮（如下图所示）时，我将获得加载程序，在裁剪图像后，它将显示已保存的图像！确认裁剪按钮下方的通知。但我希望加载和图像保存在按钮的一侧，有人在我之前处理过这个问题，我无法解决这个问题。什么可以解决这个问题

这是我正在处理的表单，如下所示：

return (
  <form className="form-horizontal" ref="form" onSubmit={this.handleForm}>
    <fieldset>
      <legend>
        {this.state.success === true ? (
          this.props.history.push(`/${serviceId}`)
        ) : this.state.success === false ? (
          <Alert bsStyle="danger">
            <strong>An error occured!</strong>
            <ol>
              {this.state.errorMessages.map((err, index) => (
                <li key={index}>{err.message}</li>
              ))}
            </ol>
          </Alert>
        ) : (
          ""
        )}
      </legend>
      <div className="row-fluid">
        <div className="span5">
          <div
            className={
              this.state.invalid.name === true
                ? "control-group error"
                : "control-group"
            }
          >
            <label className="control-label" htmlFor="name">
              Name: <i className="required">*</i>
            </label>
            <div className="controls">
              <input
                type="text"
                required
                id="name"
                defaultValue={this.state.form.name}
                name="name"
                onChange={this.handleState}
              />
              <span className="help-inline">Field required</span>
            </div>
          </div>

          <div
            className={
              this.state.invalid.image === true
                ? "control-group error"
                : "control-group"
            }
          >
            <label className="control-label" htmlFor="image">
              Image: <i className="required">*</i>
            </label>
            <div className="controls">
              <input
                type="file"
                name="image"
                defaultValue={this.state.form.image}
                onChange={this.handleState}
                accept="image/gif, image/png, image/jpeg, image/jpg"
                required
              />
              <span className="help-inline">File Type: png, gif, jpg</span>

              <div>
                <ReactCrop
                  src={
                    this.state.companyImage === null
                      ? ""
                      : this.state.companyImage
                  }
                  crop={this.state.crop}
                  onImageLoaded={this.handleImageLoaded.bind(this)}
                  onComplete={this.handleOnCropComplete.bind(this)}
                  onChange={this.handleOnCropChange.bind(this)}
                  keepSelection={true}
                />
              </div>

              {this.state.croppedImageUrl && (
                <img alt="Crop" src={this.state.croppedImageUrl} />
              )}
              <br />
              {this.state.croppedImageUrl ? (
                <div>
                  <button
                    className="btn btn-primary"
                    type="button"
                    onClick={this.handleState}
                  >
                    Confirm Crop
                  </button>
                </div>
              ) : null}
            </div>
          </div>
          {this.state.imageFetching && (
            <div className="controls">
              <p className="imageWait">Loading...</p>
            </div>
          )}

          {this.state.showImageSuccess && (
            <div className="controls">
              <p style={{ color: "green" }}>Image Saved! </p>
            </div>
          )}

          <div
            className={
              this.state.invalid.address
                ? "control-group error"
                : "control-group"
            }
          >
            <label className="control-label" htmlFor="address">
              Address <i className="required">*</i>
            </label>
            <div className="controls">
              <textarea
                rows="4"
                required
                cols="20"
                id="address"
                name="address"
                onChange={this.handleState}
                defaultValue={this.state.form.address}
              />
              <span className="help-inline">Field required</span>
            </div>
          </div>
          <div
            className={
              this.state.invalid.telephone
                ? "control-group error"
                : "control-group"
            }
          >
            <label className="control-label" htmlFor="telephone">
              Telephone: <i className="required">*</i>
            </label>
            <div className="controls">
              <input
                type="number"
                step="any"
                required
                name="telephone"
                defaultValue={this.state.form.telephone}
                onChange={this.handleState}
              />
              <span className="help-inline">Field required</span>
            </div>
          </div>
          <div
            className={
              this.state.invalid.city === true
                ? "control-group error"
                : "control-group"
            }
          >
            <label className="control-label" htmlFor="city">
              City: <i className="required">*</i>
            </label>
            <div className="controls">
              <input
                type="text"
                required
                id="city"
                defaultValue={this.state.form.city}
                name="city"
                onChange={this.handleState}
              />
              <span className="help-inline">Field required</span>
            </div>
          </div>
          <div
            className={
              this.state.invalid.country === true
                ? "control-group error"
                : "control-group"
            }
          >
            <label className="control-label" htmlFor="country">
              Country: <i className="required">*</i>
            </label>
            <div className="controls">
              <input
                type="text"
                required
                id="country"
                defaultValue={this.state.form.country}
                name="country"
                onChange={this.handleState}
              />
              <span className="help-inline">Field required</span>
            </div>
          </div>
          <div className="row-fluid">
            <div className="span12">
              <button
                className={disabledColor}
                type="submit"
                disabled={this.state.disabled}
                ref={button => {
                  this.submitButton = button;
                }}
              >
                Submit
              </button>
            </div>
          </div>
        </div>
      </div>
    </fieldset>
  </form>
);

返回(
{this.state.success==真(
this.props.history.push（`/${serviceId}`）
)：this.state.success==false(

“图像已保存！”通知也出现在加载的同一位置，从上面的代码中可以明显看出，我需要它们在按钮的一侧

此链接提供了我正在处理的整个文件和与之相关的css：

CSS:
您需要重新构造react元素，仅此而已

{this.state.croppedImageUrl ? (
   <div className="flexContainer">
      <button
        className="btn btn-primary"
        type="button"
        onClick={this.handleState}
      >
        Confirm Crop
      </button>

      {this.state.imageFetching && (
            <div className="controls">
              <p className="imageWait">Loading...</p>
            </div>
      )}

      {this.state.showImageSuccess && (
            <div className="controls">
              <p style={{ color: "green" }}>Image Saved! </p>
            </div>
      )}
   </div>
) : null}

这可能会导致按钮和通知之间的间距过大。如果是这样，请尝试在flexContainer类的定义中添加
max width:requiredValue；
。
抱歉，但这并不能解决问题。其工作方式与以前相同：（你确定这是你的页面中包含的唯一css文件吗？你能检查一下
flexContainer
类的规则是否得到应用，或者它是否被其他css覆盖了吗？在我添加了你建议的内容后，我调整了的一些填充和边距，效果很好。谢谢！
.flexContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}