onClick函數將不會執行反應

Question

原始來源：https://gist.github.com/Schachte/a95efbf7be0c4524d1e9ac2d7e12161c

我有一個onClick按鈕。它正在使用我以前的模態，現在，以一種新的模態，它不會觸發。我特別關注在底部的一行：

<button className="remodal-confirm" onClick={event => this.onClick(event)}>Feed Me</button> 

如果我參加了這一點的div並把它在返回的頂部，按鈕工程..

更新

我已經縮小了嵌套在這個模式中的東西的錯誤。這是一個標準的JS模式，沒有設置反應。不知道這可能是一個問題或解決方案。

代碼：

class ModalWindow extends Component { 

constructor(props) { 

    super(props); 
    this.onClick = this.onClick.bind(this); 
} 


onClick = (event) => { 
    event.preventDefault(); 
    console.log("executed"); 
} 






render() { 

    console.log(this.state.zipCode); 

    if (this.props.zipCode){ 
     this.renderNeighbors(this.props.zipCode) 
    } 
    return ( 
     <div> 
      <ul> 
       {this.renderNeighbors(this.props.zipCode)} 
      </ul> 

       <div className="remodal" data-remodal-id="modal"> 
        <button data-remodal-action="close" className="remodal-close"></button> 
        <h3>FrugalEats Search Information</h3> 

        <hr/> 

        <span> 
        <i className="fa fa-info" aria-hidden="true"></i> The information below will query restaurants and menus items that you can afford in your area. 
        </span> 
        <hr/> 

        <span className="input input--kaede"> 
         <input className="input__field input__field--kaede" type="text" id="input-35" placeholder="$5.00" onChange={ event => { this.setState({ priceLimit: event.target.value }) } }/> 
         <label className="input__label input__label--kaede" htmlFor="input-35"> 
          <span className="input__label-content input__label-content--kaede">Price Limit</span> 
         </label> 
        </span> 
        <span className="input input--kaede"> 
         <input className="input__field input__field--kaede" type="text" id="input-36" placeholder="Goldwater Engineering Tempe, AZ" onChange={ event => { this.setState({ zipCode: event.target.value }) } }/> 
         <label className="input__label input__label--kaede" htmlFor="input-36"> 
          <span className="input__label-content input__label-content--kaede">Location</span> 
         </label> 
        </span> 
        <span className="input input--kaede"> 
         <input className="input__field input__field--kaede" type="text" id="input-37" placeholder="2.5" onChange={ event => { this.setState({ radiusMax: event.target.value }) } }/> 
         <label className="input__label input__label--kaede" htmlFor="input-37"> 
          <span className="input__label-content input__label-content--kaede">Radius (Miles)</span> 
         </label> 
        </span> 


        <br/> 
        <button data-remodal-action="cancel" className="remodal-cancel">Cancel</button> 
        <button className="remodal-confirm" onClick={event => this.onClick(event)}>Feed Me</button> 
       </div> 

     </div> 
    ) 
} 

Answer 1

類方法的脂肪箭頭語法ES6不支持 - 試着改變你的方法定義：

onClick(event) { 
    event.preventDefault(); 
    console.log("executed"); 
} 

還有如下線路：

if (this.props.zipCode){ 
    this.renderNeighbors(this.props.zipCode) 
} 

位於渲染函數的外部返回聲明;你應該考慮其更改爲類似：

return ( 
    { this.props.zipCode ? this.renderNeighbors(this.props.zipCode) : null } 

    <div> 
    <button 
     className="remodal-confirm" 
     onClick={event => this.onClick(event)}>Feed Me 
    </button> 

    // rest of code... 
    </div> 
); 

最後，如果你認爲這是由於JSX佈局（你說這工作時，「股利外」）我想嘗試「二進制斬波」 - 選擇性地刪除jsx塊，直到找到違規部分。