为了实现UI动态交互,我们需要对数据做动态处理,这时候就需要用到state。
- 它是通过 props 从父级传来的吗?如果是,他可能不是 state
- 它随着时间推移是否改变,如果不改变,他可能不是 state
- 它能否通过props和其他state计算出来,如果是,他可能不是state
- 先看哪些个组件都需要使用这个state
- 找到这些个组件的公共上层组件,然后state就应该是它拥有
- 若找不到这个公共上层组件,需要新建一个只保存state的组件并把它放在公共所有者层级更高的地方
- 这篇文章的例子中我们找到的就是编号为1的组件作为放置state的最终组件。
父组件要将state传递到子组件,需要使用props传入,如下面代码中SearchBar中定义的filterText就是将父组件中的state传入到子组件
class ProductFilter extends React.Component {
constructor() {
super();
this.state = {
filterText: ''
}
// ...
}
render() {
return (
<div>
<SearchBar filterText={this.state.filterText} handelFilter={this.handelFilter} />
</div>
);
}
}
子组件接收父组件传入的state的写法,如下面代码中的value={this.props.filterText}
class SearchBar extends React.Component {
// ...
render() {
return (
<input type="text" name="search" id="search" value={this.props.filterText} placeholder="search..." />
);
}
}
子组件如何告诉父组件更改state 一句话:子组件通过触发父组件暴露(以props方式传入)的设置state的方法,来通知父组件修改状态。
子组件:
class SearchBar extends React.Component {
// ...
handleChange(e) {
// 触发props传过来的修改组件状态的方法
this.props.handelFilter(e.target.value);
}
render() {
return (
<input type="text" name="search" id="search"
onChange={this.handleChange} value={this.props.filterText} placeholder="search..." />
);
}
}
父组件:
class ProductFilter extends React.Component {
constructor() {
// ...
this.handelFilter = this.handelFilter.bind(this);
}
handelFilter(inputVal) {
this.setState({ 'filterText': inputVal });
}
render() {
// 通过设置handelFilter属性,将状态更新方法暴露给子组件
return (
<div>
<SearchBar filterText={this.state.filterText} handelFilter={this.handelFilter} />
</div>
);
}
}