狀態發生變化後調用函數reactjs

我的問題是這樣的。我有兩個組件。第一個組件是圖像裁剪器。第二個組件是我應該顯示裁剪圖像的一個組件。狀態發生變化後調用函數reactjs

我面臨的問題是我可以將裁剪圖像傳遞給我的第二個組件，但我必須按下裁剪圖像並傳遞給第二個組件的按鈕兩次。在第二次點擊時，只有我的圖像傳遞給第二個組件。但我只能通過一次點擊就能在第一個組件中顯示裁剪後的圖像。我認爲這是發生的，因爲在reactjs狀態變化不會立即發生。那我該如何解決這個問題。

我的方法是在第一個組件中創建一個prop函數，作爲this.props.croppedImage(this.state.preview.img);這裏this.state.preview.img是裁剪後的圖像。在第二個組件中，我通過調用prop函數來獲取裁剪後的圖像。

我的代碼

第一個部件（種植者）

class CropperTest extends React.Component { 

    constructor(props) { 

     super(props); 

     this.state = { 
      name: "beautiful", 
      scale: 1, 
      preview: null, 
     } 

     this.handleSave = this.handleSave.bind(this); 

    } 

    handleSave =() => { 

     const img = this.editor.getImageScaledToCanvas().toDataURL(); 

     this.setState({ 
      preview: { 
       img, 
       scale: this.state.scale, 
      } 
     }) 

     this.props.croppedImage(this.state.preview.img); 

    } 

    setEditorRef = (editor) => { 
     this.editor = editor 
    } 

    render() { 
     return (
      <div> 
       <div className="overlay"></div> 

       <div className="crop_div"> 
        <AvatarEditor 
         image={this.props.cropImage} 
         ref={this.setEditorRef} 
         width={450} 
         height={450} 
         border={50} 
         color={[255, 255, 255, 0.6]} // RGBA 
         scale={this.state.scale} 
         rotate={0} 
        /> 
       </div> 



       <div className="zoom_slider text_align_center"> 
        <input className="crop_btn" type='button' onClick={this.handleSave} value='Save'/> 

       </div> 

      </div> 
     ) 
    } 
} 

export default CropperTest;

第二組件

在這裏，我基本上是做以下。

<CropperTest croppedImage = {this.getCroppedImg}/> 

    getCroppedImg(img){ 

      alert("Perfect Storm"); 
      this.setState({ 

       previewImg:img 

      }) 

     }

來源

2017-09-01 CraZyDroiD

setState接受第二個參數作爲狀態更新時的回調函數。試試看！ – Brian

另外，如果你聲明他們像'method =（）=> {0123''' – ffxsam

@ffxsam謝謝，但它不是我的問題的根源 – CraZyDroiD

我認爲這是因爲發生在reactjs狀態的變化不會立即發生。那我該如何解決這個問題？

從React#setState，

的setState（更新器，[回調]）

setState()入列改變到組件狀態。 setState不會立即更新狀態。 setState()並不總是立即更新組件。它可能會批處理或推遲更新，直到稍後。這使得調用setState()潛在pitfall.Instead後立即閱讀this.state，使用componentDidUpdate或setState回調(setState(updater, callback))

調用this.props.croppedImage在setState callback.You將獲得組件狀態的更新值。在你的情況下它的this.state.preview

this.setState({ 
    preview: { 
    img, 
    scale: this.state.scale, 
    } 
},() => { 
    this.props.croppedImage(this.state.preview.img); 
})

來源

2017-09-01 04:16:15

狀態發生變化後調用函數reactjs

回答

相關問題