【问题标题】：onClick function won't execute in reactonClick 函数不会在反应中执行
【发布时间】：2017-01-01 01:30:41
【问题描述】：

原文来源：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>
    )
}

【问题讨论】：

你有 Babel 的开发预设，所以它支持类属性吗？

标签： javascript reactjs

【解决方案1】：

ES6 不支持类方法的粗箭头语法 - 尝试将方法定义更改为：

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

还有以下几行：

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

在渲染函数的 return 语句之外；您应该考虑将它们更改为：

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 的布局（您说它在“div 之外”时有效），我会尝试“二进制切碎” - 有选择地删除 jsx 块，直到您确定有问题的部分。

【讨论】：