Vormisündmused ja kollektsiooni lisamine

Võtme lisamine

Praegusel etapil peaks Chrome konsoolil kuvama hoiatuse võtme puudumise kohta:

Each child in an array or iterator should have a unique "key" prop

Et lisada igale massiivi elemendile unikaalne võti tuleb App.js-s lisada tagastatavale elemendile lisada:

return <Item item={item} key= {item._id} />

Vormist andmete baasi lisamine

Lisan failis App.js vormi <main> märgendi vahele, enne massivi väljaastamist:

<form onSubmit={this.addItems}>
          <input type='text' />
          <input type='text' />
          <button type='submit'>Lisa</button>
 </form>

Vormis kasutatakse funktsiooni addItems, ms tuleb lisda, lisan selle enne render() funktsiooni:

addItems(event) {
    event.preventDefault(); //takistab lehe uuestilaadimist
    console.log('Lisamise nupule vajutus')
  }

Argumendina kasutatakse siin sündmust (event), mida funktsioonis kasutatakse lehe uuestilaadimise vältimiseks:

event.preventDefault();

Et vormi välju eristada ja nendele viidata lisan vormis viited ref:

<input type='text' ref='asiYks'/>
<input type='text' ref='asiKaks'/>

Funktsiooni addItems väljakutsuvale käsule tuleb lisada bind() et seda kohalikus komponendis kasutada:

<form onSubmit={this.addItems.bind(this)}>

Järgmise sammuna asendan funktsioonis addItems konsoolile logimise tegeliku andmete lisamisega, andmete lisamise võib failist server/main.js nüüd kustutada:

Items.insert({
      asiYks: {
        text:this.refs.asiYks.value.trim(),
        value: 0,
    },
    asiKaks: {
      text:this.refs.asiKaks.value.trim(),
      value: 0,
  }
});

Nüüdseks on baasi kogunenud palju ülearuseid kirjeid, teeme Mongo andmebaasile reseti:

meteor reset

Salvestan vormi väärtuse viited muutujatesse, lisan kontrolli et lisatavad väljad ei ole tühjad ning peale lisamist puhastan vormi väljad:

import React, {Component} from 'react';
import { createContainer} from 'meteor/react-meteor-data';
import Item from './Item';
import Items from '../api/Items';

class App extends Component {
  addItems(event) {
    event.preventDefault(); //takistab lehe uuestilaadimist
    //Mongosse andmete lisamine
    //salvestan vormi väärtused muutujatesse
    const asiYks=this.refs.asiYks.value.trim();
    const asiKaks=this.refs.asiKaks.value.trim();
    //lisatakse vaid siis kui vormi välja pole tühjad
    if(asiYks!='' && asiKaks!=''){
        Items.insert({
          asiYks: {
            text:asiYks,
            value: 0,
        },
        asiKaks: {
          text:asiKaks,
          value: 0,
      }
    });
    //Peale lisamist tühjendame vormi väljad
    this.refs.asiYks.value ='';
    this.refs.asiKaks.value='';
    }
  }
  render () { //alati peab olema komponendi osa
    return ( // render funktsioon peab midagi tagastana, see on JSX
<div>
      <header>
        <h1>Hääletusäpp</h1>
      </header>
      <main>
        <form onSubmit={this.addItems.bind(this)}>
          <input type='text' ref='asiYks'/>
          <input type='text' ref='asiKaks'/>
          <button type='submit'>Lisa</button>
        </form>
        {this.props.items.map((item)=>{
        return <Item item={item} key= {item._id} />
        })}
      </main>
</div>
    );
  }
}
//Wrapper  andmete lisamiseks klassile App
export default createContainer(() =>{
  return {
    items: Items.find({}).fetch()
  }
},App);