функция onClick не будет выполняться в react

Первоначальный источник: https://gist.github.com/Schachte/a95efbf7be0c4524d1e9ac2d7e12161c

У меня есть onClick on a button. Он работал с моим предыдущим модальным и теперь, с новым модальным, он не срабатывает. Я особенно обеспокоен линией внизу:

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

Если я выну это из div и положу его в верхней части возврата, кнопка работает..

Обновить

Я сузил ошибки, возникающие из-за того, что вещи вложены в этот модальный. Это стандартный модальный JS, а не настройка для react. Не уверен, как это может быть проблемой или решением.

Код:

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=".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>
    )
}
Ryan S, в 01:30 (источник)

1 ответ

  1. Синтаксис fat arrow для методов класса не поддерживается в ES6-попробуйте изменить определение метода на:

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

    также следующие строки:

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

    находятся вне оператора return функции render; следует рассмотреть возможность изменения их на что-то вроде:

    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, пока вы не определите оскорбительный раздел.