Реагируйте: применяя стили и используя connect () - PullRequest
Новая
       26

Реагируйте: применяя стили и используя connect ()

0 голосов
/ 26 июня 2019

Я написал сайт с кодом ниже. Там я хочу стилизовать кнопку, используя className = {this.classes.sosbutton}, однако это выдает ошибку

TypeError: Невозможно прочитать свойство 'sosbutton' из неопределенного

Если у вас есть предложения по улучшению стиля, пожалуйста, дайте мне знать.

Кроме того, я хочу использовать функцию подключения, чтобы использовать как withRouter, так и withStyles. Я добавил в свой проект response-redux следующим образом: npm install --save Reaction-redux

Однако, когда я импортирую его в строку 4, я всегда получаю следующую ошибку:

Модуль не найден: не удается разрешить «response-redux» в 'C: \ Users \ Alexa \ Documents \ Repository \ MPD-аэробус-интерфейс \ SRC \ Landing' 

import React from 'react'; 
import { withRouter } from 'react-router-dom'; 
import Button from '@material-ui/core/Button'; 
import { withStyles } from '@material-ui/core/styles'; 
import { connect } from 'react-redux';

const styles = theme => ({   sosbutton: {
    background: 'e45050ff',
    'text-align': 'center',
    'margin-top': '30px',
    height: '80%',
    width: '100%'   } });

class SOSButton extends React.Component {   constructor(props) {
    super(props);
    this.classes = props.classes;
    this.state = {
      timerOn: false
    };
    this.timerStart = this.timerStart.bind(this);
    this.timerStop = this.timerStop.bind(this);
    this.tick = this.tick.bind(this);
    this.counter = 3;
    this.counterStep = 1;   }

  timerStart() {
    this.timerID = setInterval(() => this.tick(), 1000);
    this.setState({ timerOn: true });   }

  timerStop() {
    clearInterval(this.timerID);
    this.counter = 3;
    this.setState({ timerOn: false });
    this.props.history.push('/');   }

  tick() {
    this.counter = this.counter - this.counterStep;
    if (this.counter <= 0) {
      this.setState({ timerOn: false });
      this.timerStop();
      this.props.onSubmit();
      this.props.history.push('/emergency_sent');
    } else {
      this.setState({ timerOn: true });
    }
    console.log(this.counter);   }

  render() {
    let timerOn = this.state.timerOn;
    let button;

    if (timerOn) {
      button = (
        <div>
          You have {this.counter} seconds to cancel the emergency SOS. <br />
          <br />
          <Button size="large" color="primary" onClick={this.timerStop}>
            Press here to cancel emergency call!
          </Button>
        </div>
      );
    } else {
      button = (
        <Button className={this.classes.sosbutton} onClick={this.timerStart}>
          GET HELP NOW!
        </Button>
      );
    }

    console.log(button);
    return button;   } }

export default withRouter(connect()(withStyles(styles)(SOSButton))); //export default withRouter(SOSButton); //export default withStyles(withRouter(SOSButton)); //<Button className="emergencybutton" onClick={this.timerStart}>
...