Question

子组件

export class MultiSelectDrawer extends React.Component {

  componentDidMount(){
    window.onpopstate = ()=>{
      console.log(this.props.id);
    }
  }
  render() {
    const {input, id, label, showActionDrawer, toggleActionDrawer, items, closeActionDrawer} = this.props;
    return (
      <div>
      </div>
    );
  }
}
MultiSelectDrawer.contextTypes = {
  t: PropTypes.func.isRequired
}

export default MultiSelectDrawer;

父组件

<td style={Object.assign({},styles.filters, styles.leftAlign)}>
     <Field id="stateSearchFilter" name="stateSearchFilter" component={MultiSelectDrawer} label={this.context.t("State")} items={states} titleField='value' toggleActionDrawer = {toggleActionDrawerState} showActionDrawer = {this.state.showActionDrawerState} closeActionDrawer = {closeActionDrawerStateFilter} filterBar={filterBar}></Field>
</td>
<td style={Object.assign({},styles.filters, styles.leftAlign)}>
     <Field id="prioritySearchFilter" name="prioritySearchFilter" component={MultiSelectDrawer} label={this.context.t("Priority")} items={priorities} titleField='label' toggleActionDrawer = {toggleActionDrawerPriority} showActionDrawer = {this.state.showActionDrawerPriority} closeActionDrawer = {closeActionDrawerPriorityFilter} filterBar={filterBar}></Field>
</td>

在子componentDidMount window.onpopstate日志中，我希望在按下浏览器后退按钮时看到两个id。但它只打印第二个id，即prioritySearchFilter。我对React很新。我在这里做错了什么？

Answer 1

问题是你要覆盖你的第一个功能。你在打电话：

 window.onpopstate = ()=>{
      console.log(this.props.id);
    }

 window.onpopstate = ()=>{
      console.log(this.props.id);
    }

两次（在每个组件实例中）。因此，当您为同一个变量分配两个值时（例如，变量是window.onpopstate）。最后一项任务将覆盖第一项。

var x = 1;
x = 2 // now x is 2. previous value is overwritten.

或者在你的情况下：

window.onpopstate = func1;
window.onpopstate = func2;

这两个电话window.onpopstate现在指向func2

React组件总是给出最后给定的道具值

1 个答案: