Schedule Form Example

ScheduleField.jsx

import React, { Component, PropTypes } from 'react';
 
// Task component - represents a single todo item
export default class ScheduleField extends Component {
  change(event){
    this.props.onChange({
      time : this.refs.timeInput

    })
  }
  render() {
    var item = this.props.item;

    return (
      <div>
        Time : 
        <input ref="timeInput" type="text" value={item.time} onChange={this.change.bind(this)} />

        Name : 
        <input ref="nameInput" type="text" value={item.name} onChange={this.change.bind(this)}/>
      </div>
    );
  }
}

ScheduleFieldContainer.jsx

import { createContainer } from 'meteor/react-meteor-data';

import ScheduleField from './ScheduleField.jsx';

export default ScheduleFieldContainer = createContainer((props) => {
  const isValid = function(){
  	console.log(this.refs.timeInput.value);
  }

  return { isValid };
}, ScheduleField);

    

ScheduleForm.jsx

import React, { Component, PropTypes } from 'react';
import ScheduleField from './ScheduleField.jsx';

// Task component - represents a single todo item
export default class ScheduleForm extends Component {
  render() {
    return (
      <section>
      	<header>Horaire</header>
      	<form onSubmit={this.props.submit}>
          {this.props.items.map((item,i) =>
            <ScheduleFieldContainer key={i} item={item} />
          )}
        </form>
      </section>
    );
  }
}import { Meteor } from 'meteor/meteor';
import { ScheduleItems } from '/modules/api/collections.js';
import { createContainer } from 'meteor/react-meteor-data';
import ScheduleForm from './ScheduleForm.jsx';

export default ScheduleFormContainer = createContainer((props) => {
  let items = [
    {time : "18h", name : "Présentation"},
    {time : "19h", name : "Commencement"}
  ];

  const submit = function(){
  	console.log('submit');
  	return false;
  }

  return { items, submit };
}, ScheduleForm);

    

ScheduleFormContainer.jsx

import { Meteor } from 'meteor/meteor';
import { ScheduleItems } from '/modules/api/collections.js';
import { createContainer } from 'meteor/react-meteor-data';
import ScheduleForm from './ScheduleForm.jsx';

export default ScheduleFormContainer = createContainer((props) => {
  let items = [
    {time : "18h", name : "Présentation"},
    {time : "19h", name : "Commencement"}
  ];

  const submit = function(){
  	console.log('submit');
  	return false;
  }

  return { items, submit };
}, ScheduleForm);