反应：输入类型="checkbox" onChange 未触发

Question

谁能告诉我为什么当我点击任何复选框时 handleChange 没有被触发？复选框按我想要的预期值呈现，但未触发点击处理程序。

 37   var AutocompleteFromCheckboxes = React.createClass({
 38     handleChange: function(e) {
 39       console.log('hi');
 40       return 1;
 41     },
 42     render: function() {
 43       var autocompleteFrom = this.props.autocomplete_from.map(function(value) {
 44         return (
 45           <label for={value}>
 46             <input type="checkbox" name={value} value="{value}"
 47               onChange={this.handleChange}
 48               ref="autocomplete-from"/>
 49             {value}
 50           </label>
 51         );
 52       });
 53       return (
 54         <div className="autocomplete-from">
 55           {autocompleteFrom}
 56         </div>
 57       );
 58     }
 59   });

Answer 1

在您的代码中，匿名函数在错误的上下文中运行：只要您没有明确设置它，它就会被设置为 undefined。

这意味着 this 是 undefined 因此 this.handleChange 应该抛出一个异常（不知道你为什么没有为此检查控制台。如果你有 - 为什么你没有提到它）。

要解决此问题，您可以明确地将上下文作为 Array.prototype.map 函数调用的第二个参数传递：

var autocompleteFrom = this.props.autocomplete_from.map(function(value) {
    // ...
}, this);

一旦您解决了这个特定问题并准备好深入了解 this 在 JS 中的工作原理，请遵循此 amazing answer。

反应：输入类型="checkbox" onChange 未触发

React: input type="checkbox" onChange not triggered

javascript

reactjs