Javascript 筛选器组件的反应状态生命周期_Javascript_Reactjs

Javascript 筛选器组件的反应状态生命周期

javascript reactjs

Javascript 筛选器组件的反应状态生命周期,javascript,reactjs,Javascript,Reactjs,我只是想了解如何正确设置/读取只是过滤器的组件中的状态（即选择日期、最小-最大值等）我基本上有： onMinDateChange(minDate) { this.setState({minDate}); }, onMaxDateChange(maxDate) { this.setState({maxDate}); }, ... 现在我想在每次状态更改时调用this.props.onChange（），但我有两个问题：状态不会立即更新；在“下一个滴答声”我怎么称呼这个组件更新我

我只是想了解如何正确设置/读取只是过滤器的组件中的状态（即选择日期、最小-最大值等）

我基本上有：

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

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

...

现在我想在每次状态更改时调用this.props.onChange（），但我有两个问题：

状态不会立即更新；在“下一个滴答声”我怎么称呼这个<代码>组件更新

我不知道如何观察任何状态变化，这样我就不必写：

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

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

...

这两方面都有帮助吗？

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

_onStateUpdate() {    
  *Some code here* 
}


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

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

_onStateUpdate() {    
  *Some code here* 
}


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

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

我不知道如何观察任何状态变化

您可以使用componentDidUpdate（prevProps，prevState）回调，并在状态更改时在内部确定

在这里，您尝试将本地状态与上层组件同步。这是可能的，但要做好这件事很难。特别是当您偶尔需要从顶部设置一些过滤器值时。考虑将筛选器的状态移动到上部组件。

为此，您需要将状态对象和用于更新它的函数作为组件道具传递，而不是

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>
)

从'valuelink'导入{Link}
从'valuelink/tags.jsx'导入{Input}
const UpperComponent=React.createClass({
getInitialState（）{
返回{
过滤器：{
文本：“”，
...
}
}
},
render（）{
返回(
...
)
}
});
常量筛选器=（{state}）=>(
...
)

下面是对该技术的解释：

下面是lib：

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