反應狀態生命週期爲一個過濾器組件

我只是尋找關於如何正確設置/讀狀態的組件，只是一個過濾器（即選擇日期，最小值最大值等）的建議。反應狀態生命週期爲一個過濾器組件

我主要有：

onMinDateChange(minDate) { 
    this.setState({minDate}); 
}, 

onMaxDateChange(maxDate) { 
    this.setState({maxDate}); 
}, 

...

現在我想打電話給this.props.onChange()上每狀態的改變，但我有兩個問題：

狀態不會立即更新;我如何在「下一個打勾」上打電話給我？ componentDidUpdate？

我不知道如何觀察任何狀態變化，這樣我就不必寫：

onMinDateChange(minDate) { 
    this.setState({minDate}); 
    this.update(); 
}, 

onMaxDateChange(maxDate) { 
    this.setState({maxDate}); 
    this.update(); 
}, 

...

這兩點的任何幫助嗎？

來源

2016-08-18 Mark Kahn

您可以傳遞一個回調作爲第二個參數在'this.setState（）'中，這可以解決我認爲的問題 – anoop

您可以將回調傳遞給this.setState（）。見下圖：

_onStateUpdate() {  
    *Some code here* 
} 


onMinDateChange(minDate) { 
     this.setState({minDate}, _onStateUpdate); 
},

來源

2016-08-18 04:55:54

關於您的兩個問題，包括這一個：

我不知道如何觀察任何狀態變化

您可以使用componentDidUpdate（prevProps ，prevState）回調，並確定內部，每當狀態改變。

https://facebook.github.io/react/docs/component-specs.html#updating-componentdidupdate

這裏你想你的本地狀態上的組件同步。這是可能的，但要做到這一點很困難。尤其是當您偶爾需要從頂部設置一些過濾器值時。考慮將過濾器的狀態移至上層組件。

爲此，您需要傳遞狀態對象和函數來更新它，而不是setState作爲組件道具。狀態對象將作爲上部組件狀態的一部分存儲。

您可以使用值鏈接使它看起來優雅。這裏是你的代碼將看起來像在這種情況下：

import { Link } from 'valuelink' 
import { Input } from 'valuelink/tags.jsx' 

const UpperComponent = React.createClass({ 
    getInitialState(){ 
     return { 
      filter : { 
       text : '', 
       ... 
      } 
     } 
    }, 

    render(){ 
     return (
      ... 
      <Filter state={ Link.state(this, 'filter') } /> 
     ) 
    } 
}); 

const Filter = ({ state }) => (
    <div className="filter"> 
     <Input valueLink={ state.at('text') } /> 
     ... 
    </div> 
)

這裏的技術的解釋： https://medium.com/@gaperton/state-and-forms-in-react-part-3-handling-the-complex-state-acf369244d37#.nuloz9adx

而這裏的lib目錄下： https://github.com/Volicon/NestedLink

來源

2016-08-18 07:06:13 gaperton

反應狀態生命週期爲一個過濾器組件

回答

相關問題