DaftAcademy / frontend_levelup_2018

11 stars 33 forks source link

zacięło się :/ #9

Open ghost opened 6 years ago

ghost commented 6 years ago

Chyba dotarłem do ściany jeżeli chodzi o zadanie domowe Zegar chodzi - ale sam, jeżeli mu się poda start i metę. Formsy przyjmują start i metę ale choć niby wiem jak powinny ją przekazać ( w końcu po to dostają obsługę onSubmit od parenta to nie przekazują. Z jednej strony wiem, że wejście w cudzy kod graniczy z niemożliwością, z drugiej wszyscy robilismy ten sam przykład. Gdyby więc ktoś coś zobaczył- byłbym wdzięczny. Tylko jakby coś, piszcie otwartym tekstem, jestem świeży w te klocki.


class ParentdoPrzerobu extends React.Component {
  constructor(props) {
    super(props);

    this.state = { start: 0, meta: 0 };
    this.changeName = this.changeName.bind(this);
  }

  changeName(newStart, newMeta) {
    this.setState({
      start: newStart,   meta: newMeta
     });
  }

  render() {
    console.log('parent-start '+this.state.start);
    console.log('parent-meta '+this.state.meta);
    let meta1 = this.state.meta;
    const start1 = this.state.start;
    console.log('parent meta1' +meta1);
    console.log('parent start1'+start1);
    return (
      <div>
       <Granice onChange={this.changeName} />
       <h1>Zegar zaczyna tykać...</h1>
       <Timer start={start1} meta={meta1}/>

      </div>
    );
  }
}

class Granicedoprzerobu extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: '', start:'', meta:''};
    this.handleChangeMeta = this.handleChangeMeta.bind(this);
    this.handleChangeStart = this.handleChangeStart.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChangeMeta(event) {
    this.setState({meta: event.target.value.split(/\D/).join('') });
    console.log('handleChangeMeta wykonane');
  }

  handleChangeStart(event) {
    this.setState({start: event.target.value.split(/\D/).join('') });
    console.log('handleChangeStart wykonane');
  }
  handleSubmit(event) {//to jest odpowiednik handlechange
   const meta= + this.state.meta;
   console.log ('meta '+ meta);
   const start = + this.state.start;
   if (start > meta){
   this.props.onChange(start,meta);} else{alert('Czas startu musi bć większy od czasu stopu')};
   console.log('handlesubmit this.state.meta'+ this.state.meta);//onSubmit musi olecieć wyżej i byc ma ztym dziecko wywoływane

  }

}

  class Timer extends React.Component {
    constructor(props) {
      super(props);
      this.state = { start: 100, meta: 90, komunikat:" Liczymy Liczymy..."};
      this.onClickHandler = this.onClickHandler.bind(this)
    }

componentWillReceiveProps(){

this.setState({start: this.props.start, meta: this.props.meta})
console.log('timer start '+this.props.start);
console.log('timer meta'+ this.props.meta);

}
shouldComponentUpdate(nextProps, nextState) {
  if ((this.state.start == 100) && 
    (this.state.meta == 90)) {
    return false;
  } else {
    alert("Okay fine I will update.")
    return true;
  }
}

  onClickHandler () {
    alert('od nowa.');}

    componentDidMount() {
      this.timerID = setInterval(
        () => this.tick(),
        1000
      );
    }

    componentWillUnmount() {
      clearInterval(this.timerID);
    }

    tick() {

      if (this.state.start>this.state.meta){
      this.setState ({
        start: this.state.start-1

       });console.log('tyk'+ this.state.start );

      }

       else(this.setState({komunikat:'No to policzyli my !'}))

       }
      ``
jakubgrzywaczewski commented 6 years ago

Tu masz przykładowe rozwiązanie wrzucone: https://github.com/daftcode/frontend_levelup_2018/blob/master/02b_zadanie_domowe.md

dzienisz commented 6 years ago

@PiotrMaksymiuk spróbuj pisać nazwy komponentów po angielsku.

Podeślesz link do repo? Bez tego trochę ciężko sprawdzić błędy.