在componentDidMount中设置状态时触发onChange？

Question

当一个人选中复选框时，我需要向我的URL添加一些查询参数。

我正在使用React Router，所以我在更改事件的复选框中执行了类似的操作。

  const stringified = queryString.stringify(parsed);
  const path = `${this.props.location.pathname}?${stringified}`;
  this.props.history.replace(path)

但是，这似乎确实导致了页面的重新渲染（不确定是否应该发生这种情况，希望它不要这样做，所以也许我必须使用除replace之外的其他东西？）。

我想检查URL的componentDidMount来查看值是否存在。 如果它在那里，那么我想更新复选框的状态。

  @observable
  isChecked = false;

  @action
  componentDidMount() {
    const parsed = queryString.parse(this.props.location.search);
    this.isChecked = parsed && parsed["param"] === this.props.option;
  }

但是我看不到onChange被触发。

现在，我需要更改一个使用该值并使用它进行过滤的函数，因此我需要运行该函数。

我可以将该函数放在componentDidMount中，但我想确保在执行此操作之前，我没有丢失为何未触发change事件的信息。

Answer 1

尝试在constructor()和componentDidUpdate()设置状态。

将URL参数添加到同一路由时，将利用现有组件（即更新事件）与正在创建的新组件。 结果，您将不会看到componentDidMount()事件。

另一个选项/解决方案是直接更新isChecked的状态并推送历史记录/ URL更改。

Answer 2

如果您要阻止页面刷新，请在onSubmit事件中使用此内置函数（如果我正确理解了您的问题）。

event.preventDefault();

它阻止浏览器自动刷新！ 确保在函数中调用事件。 即

onSubmit=(event)=>{
event.preventDefault();
//rest of code
}

如果您尝试过滤，则es6 .filter方法对于复选框很有用。 我个人使用选择下拉菜单来过滤选项，并在待办事项列表中有选择地显示被选中的项目：“完成”，“活动”，“已完成”，并在我的过滤方法中使用了这些状态。