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

Question

I need to add some query paramaters to my url as a person checks off checkboxes.

I am using react router so I do something like this in my checkboxes on change event.

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

This does however seem to cause a re-render of the page(not sure if this should be happening, would prefer it not to do that so maybe I got to use something other than replace?).

I wanted to check on componentDidMount the url to see if the value is there. If it is there then I wanted to update the state of the checkbox.

  @observable
  isChecked = false;

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

However I don't see the onChange being trigger.

Right now I have on change a function that takes the value and uses it to filter, so I need the function to run.

I could put that function in the componentDidMount but I wanted to make sure before I do that, there is nothing I am missing on why the change event is not be fired.

Answer 1

Try setting the state in the constructor() and in componentDidUpdate() .

When a URL parameter is added to the same route, the existing component is utilized (ie an update event) vs. a new one being created. As a result, you won't see a componentDidMount() event.

Another option/solution is to update the state of isChecked directly and push the history/url change.

Answer 2

If what you are trying to prevent is the page refresh use this built in function in your onSubmit event(if I understand your question correctly.)

event.preventDefault();

It stops the browser from auto-refreshing! Make sure to call event in your function though. ie

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

If you are trying to filter, the es6 .filter method is useful for checkboxes. I personally used a select dropdown menu to filter the options and selectively show the ticked items in a ToDo List: "Done" "Active" "Completed" and used those states in my filter method.