Question

我正在寻找有关如何在仅仅是过滤器的组件中正确设置/读取状态的建议（即选择日期，最小值最大值等）。

我基本上有：

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();
},

...

对这两点有任何帮助吗？

Answer 1

您可以将回调传递给this.setState（）。见下文：

_onStateUpdate() {    
  *Some code here* 
}


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

Answer 2

关于你的两个问题，包括这个问题：

我不确定如何观察任何状态变化

您可以使用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

反映过滤器组件的状态生命周期

2 个答案: