What does react docs mean by "… pass this.props.onChange directly to Chosen …" in the article "Integrating with jQuery Chosen Plugin"?

huangapple go评论67阅读模式
英文:

What does react docs mean by "... pass this.props.onChange directly to Chosen ..." in the article "Integrating with jQuery Chosen Plugin"?

问题

I am going through the react documentation article of integrating-with-jquery-chosen-plugin, and there they mention:

> We won’t pass this.props.onChange directly to Chosen because component’s props might change over time, and that includes event handlers. Instead, we will declare a handleChange() method that calls this.props.onChange, and subscribe it to the jQuery change event

This doesn't make sense to me, because they are already using (passing as prop?) onChange on Chosen in <Chosen onChange={value => console.log(value)}>. Here's the code the docs use just after:

function Example() {
  return (
    <Chosen onChange={value => console.log(value)}>
      <option>vanilla</option>
      <option>chocolate</option>
      <option>strawberry</option>
    </Chosen>
  );
}

It appears to me that the docs wanted to say:

> We won’t pass this.props.onChange directly to <strike>Chosen</strike> select because [Chosen]component’s props might change over time, and that includes event handlers (onChange?).

But still, I don't grasp the meaning of props including event listeners might change. The only prop that might change here is the children prop, which would affect select's {this.props.children}. Why would the onChange event listener change?

Can someone please elaborate upon what the docs are trying to say.

英文:

I am going through the react documentation article of integrating-with-jquery-chosen-plugin, and there they mention:

> We won’t pass this.props.onChange directly to Chosen because component’s props might change over time, and that includes event handlers. Instead, we will declare a handleChange() method that calls this.props.onChange, and subscribe it to the jQuery change event

This doesn't make sense to me, because they are already using(passing as prop?) onChange on Chosen in &lt;Chosen onChange={value =&gt; console.log(value)}&gt;. Here's the code the docs use just after:

function Example() {
  return (
    &lt;Chosen onChange={value =&gt; console.log(value)}&gt;
      &lt;option&gt;vanilla&lt;/option&gt;
      &lt;option&gt;chocolate&lt;/option&gt;
      &lt;option&gt;strawberry&lt;/option&gt;
    &lt;/Chosen&gt;
  );
}

It appears to me that the docs wanted to say:

> We won’t pass this.props.onChange directly to <strike>Chosen</strike> select because [Chosen]component’s props might change over time, and that includes event handlers(onChange?).

But still I don't grasp the meaning of props including event listeners might change. The only prop that might change here is the children prop, which would affect select's {this.props.children}. Why would the onChange event listener change?

Can someone please elaborate upon what the docs are trying to say.

答案1

得分: 2

这是文档建议的内容:

componentDidMount() {
  this.$el = $(this.el);
  this.$el.chosen();

  this.handleChange = this.handleChange.bind(this);
  this.$el.on('change', this.handleChange);
}

handleChange(e) {
  this.props.onChange(e.target.value);
}

通过提到:

>我们不会直接将this.props.onChange传递给Chosen,因为组件的props可能会随时间而变化,包括事件处理程序。相反,我们将声明一个handleChange()方法,该方法调用this.props.onChange,并将其订阅到jQuery的change事件。

他们想要避免这样做:

componentDidMount() {
  this.$el = $(this.el);
  this.$el.chosen();

  this.$el.on('change', this.props.onChange);
}

在这个例子中,当组件挂载时,设置了事件监听器,并且给定的事件处理程序是this.props.onChange的这个版本,它将不会被更新,但是

>组件的props可能会随时间而变化

在评论部分有一个很好的示例。

所以我们想要的是始终获取最新的更新props,以下是创建自己的函数的好处,这样我们可以将其绑定到this

this.handleChange = this.handleChange.bind(this);
this.$el.on('change', this.handleChange);

通过使用this.handleChange.bind(this)并引用this.handleChange作为事件处理程序,您确保事件处理程序始终调用与绑定时的props关联的this.handleChange

英文:

This is what docs suggests:

componentDidMount() {
  this.$el = $(this.el);
  this.$el.chosen();

  this.handleChange = this.handleChange.bind(this);
  this.$el.on(&#39;change&#39;, this.handleChange);
}

handleChange(e) {
  this.props.onChange(e.target.value);
}

by mentioning

>We won’t pass this.props.onChange directly to Chosen because component’s props might change over time, and that includes event handlers. Instead, we will declare a handleChange() method that calls this.props.onChange, and subscribe it to the jQuery change event

They want to avoid doing this :

componentDidMount() {
  this.$el = $(this.el);
  this.$el.chosen();

  this.$el.on(&#39;change&#39;, this.props.onChange);
}

in this example, when the component is mounted, the event listener is set and this version of this.props.onChange given as event handler is stuck, it will not be updated, but

>component’s props might change over time

there is a good example in the comments section.

so what we want is to always get the newest updated props, here's the benefit of creating our own function so we can bind it to this:

this.handleChange = this.handleChange.bind(this);
this.$el.on(&#39;change&#39;, this.handleChange);

By using this.handleChange.bind(this) and referencing this.handleChange as the event handler, you ensure that the event handler alwayz calls this.handleChange associated with the props at the time of binding.

huangapple
  • 本文由 发表于 2023年6月6日 02:52:53
  • 转载请务必保留本文链接:https://go.coder-hub.com/76409238.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定