Неисправность вставки нескольких текстовых полей в коллекцию

Question

Я модифицировал приложение Meteor1.3 + React Todos, чтобы ослабить основы, и пока все идет хорошо. Тем не менее, я хотел бы добавить другое текстовое поле, чтобы пользователь мог представить описание элемента (первое поле, которое поставляется с приложением Todos), а также стоимость этого элемента. Я пытался добавить второе поле ввода и скопировать значения/передать их в task.js api, но я не могу заставить его работать. Я знаю, что это эстетически неудобно (нажатие вводит ввод двух текстовых полей в коллекцию), и это может быть невозможно /, скорее всего, это не правильный способ сделать что-то подобное.

Вот что я работаю с:

App.jsx

import React, { Component, PropTypes } from 'react'; 
import ReactDOM from 'react-dom'; 
import { Meteor } from 'meteor/meteor'; 
import { createContainer } from 'meteor/react-meteor-data'; 

import { Tasks } from '../api/tasks.js'; 
import Task from './Task.jsx'; 
import AccountsUIWrapper from './AccountsUIWrapper.jsx'; 

// App component - represents the whole app 
//render collection of tasks 
class App extends Component { 
    //componenet contructor that contains initializations for: hideCompleted 
    constructor(props) { 
     super(props); 

     this.state = { 
      hideCompleted: false, 
     }; 
    } 

    //Event handler for when you press enter to input data. Calls Meteor method tasks.insert and sends it the text, 
    //then clears the text form 
    handleSubmit(event) { 
     event.preventDefault(); 

     // Find the task text field via the React ref 
     const taskText = ReactDOM.findDOMNode(this.refs.textInput).value.trim(); 
     // Find the cost field via the React ref 
     const costNum = ReactDOM.findDOMNode(this.refs.costInput).value.trim(); 

     //Call the tasks insert method in tasks.js api 
     Meteor.call('tasks.insert', taskText, costNum); 

     // Clear task form 
     ReactDOM.findDOMNode(this.refs.textInput).value = ''; 
     //Clear cost form 
     ReactDOM.findDOMNode(this.refs.textInput).value = ''; 


    } 

    //Event handler for hideCompleted checkbox check 
    toggleHideCompleted() { 
     this.setState({ 
      hideCompleted: !this.state.hideCompleted, 
     }); 
    } 

    //Filters out tasks that have hideCompleted === true 
    renderTasks() { 
     let filteredTasks = this.props.tasks; 
     if (this.state.hideCompleted) { 
      filteredTasks = filteredTasks.filter(task => !task.checked); 
     } 
     return filteredTasks.map((task) => (
      <Task key={task._id} task={task} /> 
     )); 
    } 

    render() { 
     return (
      <div className="container"> 
       <header> 
        <h1>The Economy</h1> ({this.props.incompleteCount}) 
        <label className="hide-completed"> 
         <input 
          type="checkbox" 
          readOnly 
          checked={this.state.hideCompleted} 
          onClick={this.toggleHideCompleted.bind(this)} 
         /> 
         Hide Completed Tasks 
        </label> 

        <AccountsUIWrapper /> 

        { this.props.currentUser ? 
         <form className="new-task" onSubmit={this.handleSubmit.bind(this)} > 
          <input 
           type="text" 
           ref="textInput" 
           placeholder="Type to add new tasks" 
          /> 
          <input 
           type="Number" 
           ref="costInput" 
           placeholder="Type to add cost" 
          /> 
         </form> : '' 
        } 
       </header> 

       <ul> 
        {this.renderTasks()} 
       </ul> 
      </div> 
     ); 
    } 
} 

//proptypes - set up the tasks proptype 
App.propTypes = { 
    tasks: PropTypes.array.isRequired, 
    incompleteCount: PropTypes.number.isRequired, 
    currentUser: PropTypes.object, 
}; 

//exports createContainer function which queries the tasks collection 
export default createContainer(() => { 
    return { 
     tasks: Tasks.find({}, { sort: { createdAt: -1 } }).fetch(), 
     incompleteCount: Tasks.find({ checked: { $ne: true } }).count(), 
     currentUser: Meteor.user(), 
//  currentBalance: Tasks.characters.aggregate([ { $group: { _id: null, total: { $sum: "$cost" } } } ]), 
    }; 
}, App); 

tasks.js

import { Meteor } from 'meteor/meteor'; 
import { Mongo } from 'meteor/mongo'; 
import { check } from 'meteor/check'; 

export const Tasks = new Mongo.Collection('tasks'); 

Meteor.methods({ 
    'tasks.insert'(text, cost) { 
     //Make sure that text is a String 
     check(text, String); 
     //Make sure that cost is a Number 
     check(cost, Number); 


     // Make sure the user is logged in before inserting a task 
     if (! this.userId) { 
      throw new Meteor.Error('not-authorized'); 
     } 

     //Actual database insertion 
     Tasks.insert({ 
      text, 
      cost, 
      createdAt: new Date(), 
      owner: this.userId, 
      username: Meteor.users.findOne(this.userId).username, 
     }); 
    }, 
    'tasks.remove'(taskId) { 
     check(taskId, String); 

     Tasks.remove(taskId); 
    }, 
    'tasks.setChecked'(taskId, setChecked) { 
     check(taskId, String); 
     check(setChecked, Boolean); 

     Tasks.update(taskId, { $set: { checked: setChecked } }); 
    }, 
}); 

Я чувствую, что есть какой-то тип простого ответа из но после некоторого времени поиска я не могу найти ничего, что имеет смысл для меня. Я еще не занимался в пакетах React forms, потому что думал, что смогу сделать это без него. Мне плохо, когда я спрашиваю о чем-то, кажущемся таким простым, но, увы, я здесь. Любое рекомендуемое чтение или методы для изучения в значительной степени приветствуются.

Answer 1

Я думаю, что вы забыли добавить кнопку в форму

<input type="submit" value="Submit my form" />