英文:
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 <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.
答案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('change', 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('change', 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('change', 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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论