Question

我一直在修改Meteor1.3 + React Todos应用程序以降低基础知识，到目前为止一直进展顺利。但是，我想添加另一个文本字段，以便用户可以提交项目的描述（Todos应用程序附带的第一个字段）以及该项目的成本。我一直在尝试添加第二个输入字段并复制值/将它们传递给tasks.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表单包，因为我认为没有一个我能够做到这一点。我觉得要问一些看似如此简单的事情我感觉不好，但我在这里唉。任何推荐的阅读或方法都非常感谢。

Answer 1

我想您忘记在表单中添加按钮

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

无法将多个文本字段插入集合中

1 个答案: