反应：输入类型=“复选框”onChange没有触发

Question

任何人都可以告诉我为什么handleChange没有触发，当我点击任何复选框？复选框按照我想要的预期值呈现，但不会触发点击处理程序。只要你不设置明确它被设置为undefined：

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

在你的代码中匿名函数与错误的上下文中运行。

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

为了解决这个问题，你可以明确地通过上下文作为Array.prototype.map函数调用的第二个参数：尽快

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

而当你解决这个特定的问题，并准备潜入细节上如何this在JS中工作，请按照这个amazing answer。