prosta aplikacja w React

Question

Nie proszę o gotowca ale konkretne rady. Sam chcę się jak najwięcej nauczyć ;) 

Cześć mam do zrobienia prostą todo list ale w React według wytycznych 

Aplikacja po uruchomieniu pokazuje 3 przyciski - Add, Remove oraz Clear.

1. Po kliknięciu przycisku Add na liście pod przyciskami pojawia się nowe zadanie z treścią “Task number #” gdzie # to numer zadania. 

2. Po ponownym kliknięciu na przycisk Add, do listy dodaje się kolejne zadanie z kolejnym numerem. 

3. Wciśnięcie przycisku Remove, usuwa ostatni task (task o najwyższym numerze). 

4. Wciśnięcie przycisku Clear usuwa wszystkie zadania z listy.

Tu jest  kod i pytanie co dalej zrobić 

https://jsbin.com/qexenezumo/edit?html,css,js,output

class IncorporationForm extends React.Component {
  constructor() {
    super();
    this.state = {
      name: '',
      shareholders: [{ name: '' }],
    };
  }
  
  handleNameChange = (evt) => {
    this.setState({ name: evt.target.value });
  }
  
  handleShareholderNameChange = (idx) => (evt) => {
    const newShareholders = this.state.shareholders.map((shareholder, sidx) => {
      if (idx !== sidx) return shareholder;
      return { ...shareholder, name: evt.target.value };
    });
    
    this.setState({ shareholders: newShareholders });
  }
  
  
  
  handleAddShareholder = () => {
    this.setState({ shareholders: this.state.shareholders.concat([{ name: '' }]) });
  }
  
  
  
  render() {    
    return (
      <form onSubmit={this.handleSubmit}>
       
        <button type="button" onClick={this.handleAddShareholder} className="small">Add Shareholder</button>
      
        {this.state.shareholders.map((shareholder, idx) => (
          <div className="shareholder">
            <input
              type="text"
              placeholder={`Shareholder #${idx + 1} name`}
              value={shareholder.name}
              onChange={this.handleShareholderNameChange(idx)}
            />
          </div>
        ))}
        
        
      </form>
    )
  }
}

ReactDOM.render(<IncorporationForm />, document.body);

 

Comments

Usuwanie treści swoich pytań jest zabronione. Dopóki nie padną odpowiedzi możesz pytanie sam ukryć. W wyjątkowych przypadkach można poprosić o usunięcie pytania (z konkretnym powodem), bądź jeśli jest jakiś element, który nie może być publiczny to skasować tylko go. Ale nie samemu kasować całość, bo akurat miałeś taki wymysł.

Answer 1

Wygląda mi to na zadanie rekrutacyjne, a jeśli tak to ja bym polecił Ci podciągnąć reduxa i zrobić ładny podział na komponenty, oddzielnie trzymać stan reduxa, akcje, reducery itp. Do tego samo trzymanie listy można by machnąć też np. w localStorage itp.

W tego typu zadaniach nie chodzi o samo wykonanie poleceń ale też o to w jaki sposób podejdziesz do problemu. Pokaż, że umiałbyś zaprojektować cała architekturę takiej aplikacji TODO i że znasz podstawy react i redux. Do tego wg mnie warto byłoby machnąć jakieś proste choćby testy.

Answer 2

Mimo że to prosta apka to użyj reduxa, bo bez tego można się pozabijać w tym React'cie.

Answer 3

Odpowiedź na szybko. Musisz dodać do metody render buttony. Każdy z nich musi mieć onClick uruchamiający jakąś metodę. Ta metoda powinna pobierać dane z state, modyfikować je i za pomocą setState aktualizować dane trzymane w state. Po każdej takiej aktualizacji renderuje Ci się nowy widok komponentu. Jeśli przycisk Add ma działać inaczej przy pierwszym i drugim kliknięciu to dodaj sobie to state stan przycisku np. false, a po pierwszym kliknięciu zmieniaj go na true. Jeśli stan będzie true wykonuj inną akcję i po niej zmieniaj stan na false.

Moim zdaniem do tak prostego zadania Redux jest zbędny. To zadanie wygląda na zwykłe złapanie eventu klinięcia i modyfikowanie stanu komponentu i pracę z formularzem.