Question

起初：我真的是React和Meteor的初学者，真的不明白，发生了什么事。

所以，我有一个Meteor / React应用程序，可将待办事项添加到数据库中。

我需要通过添加删除功能并将其标记为复选框功能来完成此应用程序。

但是此代码不是删除Todos，而是添加了带有复选框和删除按钮的空Todo。而且我不明白为什么。

如何使其工作？

TodoApp.jsx

    export default class TodoApp extends React.Component {
        constructor() {
            super()
            this.state = {
                todo: ''
            }
        };
//saving input task state
handleChange(e) {
    var todo = e.target.value
    this.setState({ todo })
};
//adding tasks to database and cleaning input
        handleSubmit(e) {
            e.preventDefault();
            var todo = this.state.todo
            todoContainer.insert({ todo }, (err, done) => {
                console.log(err + 'id =' + done)
            })
            this.setState({ todo: '' })
        };

        render() {
            return (
                <Form className="form" onSubmit={(e) => this.handleSubmit(e)}>
                    <Form.Group>
                        <Form.Input onChange={(e) => this.handleChange(e)} value={this.state.todo} />
                        <Button type="submit">Add</Button>
                    </Form.Group>
                    <TodoList />
                </Form>
            )
        };
    };

Todos.js

    export default class Todo extends React.Component {

            toggleChecked() {
    // 
        todoContainer.update(this.props.todo._id, {
            $set: { checked: !this.props.todo.checked },
        });
    }

    deleteThisTodo() {
        todoContainer.remove(this.props.todo._id);
     }

render() {

    const todoClassName = this.props.todo.checked ? 'checked' : '';

    return (
        <li className={todoClassName}>
        <button className="delete" onClick={this.deleteThisTodo.bind(this)}>
          &times;
        </button>

        <input
          type="checkbox"
          readOnly
          checked={this.props.todo.checked}
          onClick={this.toggleChecked.bind(this)}
        />


        {this.props.todo}


      </li>
    /*<span className="text">{this.props.task.text}</span>*/
            )
        }
    }

流星/反应Todo应用程序的删除和复选框功能

0 个答案: