更新

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)
}

在render函数的 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的块，直到你找到有问题的部分。

onClick函数不会在react中执行

更新

代码：

1 个答案: