When I pass onChange or onComplete visual effects don't work about react-image-crop HOT 9 CLOSED

The problem is that you are calling setState in onComplete, which causes a re-render, and you are statically setting the crop to crop={{height: 100, aspect: 1}}.

Instead you should assign the crop to a variable (or state) e.g.

state = {
  currentCropState: {height: 100, aspect: 1}
};

  return <ReactImageCrop src="/image.png" crop={this.state.currentCropState} ....

onComplete(crop) {
  this.setState({currentCropState: crop});
}

from react-image-crop.

Confirm this problem still exists when calling setState in onComplete.

from react-image-crop.

I can't replicate this, are you sure you're not manipulating the crop in these callbacks? Please post some code or even better a demo

from react-image-crop.

I can confirm and reproduce a part of this issue. When onComplete is passed to ReactImageCrop, the cropped are stays fixed according to the initial crop state passed.

class Changer extends React.Component {

    state = {
        currentCropState: {}
    };

    handleOnComplete = (crop) => {
        this.setState({currentCropState: crop});
    }

    render() {
        return <ReactImageCrop src="/image.png" crop={{height: 100, aspect: 1}} onComplete={this.handleOnComplete} />;
    }

}

However, when onComplete={this.handleOnComplete} is not passed, the cropped works as expected.

With onComplete :

Without onComplete:

The workaround seems to assign a ref to the ReactImageCrop component and access the current crop state using this.refs.{yourAssignedRefName}.state.crop. But beware, accessing it explicitly resets the crop state (after access).

from react-image-crop.

I see. It works now.

But, just out of curiosity, since my onComplete handling is not making any change that affects the state of ReactImageCrop, then ReactImageCrop shouldn't be getting re-rendered right?

from react-image-crop.

By default react components will re-render unless something is implemented in shouldComponentUpdate - so fair point, maybe I'll implement something there.

Although a typical shallow compare won't work because your crop object is created on each render, so even though the values are the same crop !== crop.

from react-image-crop.

Since change of any property of crop object leads to change in multiple dimensions, it would make sense to check if any property in the new crop property is different from the current crop state. If no property has changed, then perhaps return false from shouldComponentUpdate?

from react-image-crop.

I can also confirm I can replicate this bug too so I'll look into it

from react-image-crop.

What is happening is that you are not setting the crop state, thus when you call this.setState it is triggering a render and ReactCrop is being passed your original crop state instead of the new one.

When using setState in any of the callbacks you must ensure that you also set the new crop state, i.e. this.setState({ something: true. crop })

If your are using outputUnitsInPixels this won't be possible (as you shouldn't pass a pixel crop to ReactCrop). I am going to deprecate outputUnitsInPixels in the next release (1.0.0), the converted pixel crop will always be passed as the last arg in the callbacks.

from react-image-crop.