反应状态生命周期为一个过滤器组件

我只是寻找关于如何正确设置/读状态的组件，只是一个过滤器（即选择日期，最小值最大值等）的建议。反应状态生命周期为一个过滤器组件

我主要有：

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

反应状态生命周期为一个过滤器组件

回答

相关问题