反應：輸入類型=「複選框」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。