html - 在按钮的一侧显示图像裁剪通知

Question

我正在使用 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>
);

现在的样子:

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

此链接提供了我正在工作的整个文件和与之关联的 css:https://gist.github.com/BikalNepal/0fe035e8845a5bb92c477abd9c003a50

CSS:https://gist.github.com/BikalNepal/73a3db6127ebda4b5489be8df3143d43

Answer 1

你需要重新构造你的 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}

注意:我所做的就是:将需要共享相同水平空间的元素包装在一个父 div 中。

并在css文件中引入一个类:

.flexContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

这可能会导致您的按钮和通知之间有很多间距。如果是这样，请尝试在 flexContainer 类的定义中添加 max-width: requiredValue;。