简体繁体 English

ReactJS中的onChange或onClick的单选按钮和复选框

[英]onChange or onClick for Radio buttons and Check boxes in ReactJS

原文 2017-08-02 14:06:16 7 2 javascript/ reactjs

What is the best practice for handling events on Radio Buttons and Check boxes in ReactJS? 在ReactJS中处理单选按钮和复选框事件的最佳实践是什么？ The documentation shows using " onClick " on the "Handling Events" documentation and it shows using " onChange " in the "Forms" documentation. 该文档在“处理事件”文档中使用“ onClick ”显示，在“表单”文档中使用“ onChange ”显示。 onChange only fires one time on Radio Buttons, so I am currently using onClick for them. onChange仅在单选按钮上触发一次，因此我目前对其使用onClick。 I assume this is a bug. 我认为这是一个错误。

2 个解决方案

Heyo, It's not a bug it is because in some cases you only want to know when it changes. Heyo，这不是错误，因为在某些情况下，您只想知道它何时更改。 For example, when you have an API that supports patch so you can send modifications on every change. 例如，当您拥有一个支持补丁程序的API时，便可以在每次更改时发送修改。

If your API only support submitting all at once the onClick is right for you! 如果您的API仅支持一次提交所有内容，那么onClick适合您！

Radio buttons respond to both onchange and onclick events in JavaScript. 单选按钮响应JavaScript中的onchange和onclick事件。 However, the onchange event may not work as you would expect it. 但是，onchange事件可能无法正常运行。 The onchange event is not triggered when turning a radio button on and off but only one or the other. 打开和关闭单选按钮时不会触发onchange事件，而只能打开或关闭一个。

Most browsers trigger onchange when the radio button is selected, but Internet Explorer prior to version 9 triggers onchange when the radio button is deselected. 大多数浏览器在选择单选按钮时触发onchange ，但版本9之前的Internet Explorer在取消选择单选按钮时触发onchange 。