im a noob в React.js, и просто возиться с компонентами и прослушивателями событий, я пытаюсь добавить eventlistener к кнопке, но он почему-то не работает... Я попытался импортировать элемент, но это просто дает кучу других ошибок, может кто-нибудь рассказать мне, как я могу заставить это работать? Спасибо
import React from 'react';
import ReactDOM from 'react-dom';
class Passiing extends React.Component {
scream() {
alert('you passed!');
}
render() {
return <Button onClick={this.scream}>Did you pass?</Button>;
}
}
ReactDOM.render(<Button />, document.getElementById('app'));
export default Passiing;
Вам нужно будет импортировать кнопку с помощью реакции-бутстрапа.
import {Button} из 'response-bootstrap';
Чтобы стиль отображался, установите bootstrap и импортируйте 'bootstrap/dist/css/bootstrap.css' и добавьте его в index.js
Чтобы использовать кнопку,
Отправить
Проблема точно такая же, как указано в ошибке. Вы используете компонент Button
который не определен нигде. Вам нужно либо определить класс Button
либо Button
импорта где-нибудь (например, библиотеку пользовательского интерфейса).
Вы пытаетесь использовать реакцию-бутстрап? если это так, добавьте этот импорт: import { Button } from 'react-bootstrap'
, если вы еще не установили его, выполните следующую команду:
$ npm install --save react react-dom
$ npm install --save react-bootstrap
если у вас нет намерения использовать его, вы должны сами создать компонент Button Button и импортировать его.
Ваш код должен выглядеть так.
import React from 'react';
import ReactDOM from 'react-dom';
class Passiing extends React.Component {
constructor(props) {
super(props)
this.scream = this.scream.bind(this);
}
scream() {
alert('you passed!');
}
render() {
return (
<input type='button' value="button" onClick={this.scream} />
);
}
}
ReactDOM.render(<Passiing/>, document.getElementById('app'));
export default Passiing;