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的状态并推送历史记录/网址更改。

Answer 2

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

event.preventDefault();

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

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

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

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

2 个答案: