Я надеюсь, что кто-то может мне помочь.У меня есть две кнопки в компоненте реакции.Они оба вызывают одну и ту же функцию JavaScript.Одна кнопка работает, а другая - нет.Может ли кто-нибудь помочь мне объяснить, что происходит?
Я упростил код до наименьшего блока, демонстрирующего проблему.
Вот файл «response.buttonClickComponent.js":
class ButtonClick extends React.Component { constructor(props) { super(props); } componentDidMount() { console.log("componentDidMount"); } buttonClickLaser = () => { console.log("buttonClickLaser()"); } render() { console.log("inside render"); return ( <div> <button onclick={this.buttonClickLaser} >Button 1 - Doesnt Work</button> <button class="btn btn-default" onClick={this.buttonClickLaser}>Button 2 - This Button Works! <span class="glyphicon glyphicon-fast-forward"></span></button> </div> ) } }
Я ожидаю, что обе кнопки вызовут функцию buttonclickLaser (), но кнопка 1 не работает!
Вот файл HTML, который вызывает компонент реагирования:
<html> <head> <script type="application/javascript" src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script> <script type="application/javascript" src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js"></script> <script type="application/javascript" src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script type="application/javascript" src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script> <script type="application/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script type="text/babel" src="react.buttonClickComponent.js" crossorigin="anonymous"></script> </head> <body> <div id="app"></div> <script type="text/babel"> $(document).ready(function () { console.log("document loaded"); ReactDOM.render(<ButtonClick />, document.getElementById('app')); }); </script> </body> </html>
Ошибка onclick, используйте onClick
onclick
onClick
<button onClick={this.buttonClickLaser} >Button 1 - Doesnt Work</button>