Question

我很抱歉这个问题，因为我认为之前已经问过这个问题。但是，我不理解反应，或根本不理解人们对其他问题的答案。不要将它们实现到我的代码中。

这是主要代码：

import React from 'react';
import ReactDOM from 'react-dom';

import TodoItem from './components/TodoItem';

class App extends React.Component {

componentWillMount() {
    this.setState({todoList: [], inputField: ''});
}

handleInput(event) {
    this.setState({inputField: event.target.value});
}

addTodo(event) {

    if(this.state.inputField.length === 0 || event.keyCode && event.keyCode !== 13) return;

    event.preventDefault();
    var newTodo = {
        text: this.state.inputField,
        created_at: new Date(),
        done: false
    };
    var todos = this.state.todoList;
    todos.push(newTodo);
    this.setState({todoList: todos, inputField: ''});
}

render() {
    return (
        <div>
            <ul>
                {
                    this.state.todoList.map(function(todo, index){
                        return (
                            <TodoItem todo={todo} key={index} />
                        );
                    })
                }
            </ul>
            <div>
                <label htmlFor="newTodo">Add Todo item</label>
                <input name="newTodo" value={this.state.inputField} type="text" onKeyUp={this.addTodo.bind(this)} onChange={this.handleInput.bind(this)} />
                <button type="button" onClick={this.addTodo.bind(this)} >Add</button>
            </div>
        </div>
    );
}
}

ReactDOM.render(
        <App />,
    document.getElementById('root')
);

这是另一部分：

import React from 'react';

class TodoItem extends React.Component {
constructor(props) {
    super(props);
    this.state = {todo: props.todo};
}
toggleDone(event) {
    var currentTodo = this.state.todo;
    if (currentTodo.done) {
        currentTodo.done = false;
    } else {
        currentTodo.done = true;
    }
    this.setState({todo: currentTodo});
}

removeTodo(event) {

    event.preventDefault();
    var todos =  this.state.todoList;
    todos.remove(this);
}

render() {
    return (
        <li>
            <input type="checkbox" onChange={this.toggleDone.bind(this)} />
            <span className={this.state.todo.done ? 'done' : ''} >
            {this.state.todo.text}</span>
            <button type="button" onClick={this.removeTodo.bind(this)} 
            >X</button>
        </li>
    );
  }
}

export default TodoItem;

首先我在主代码中有删除函数，但是我得到了一个未被捕获的类型错误，而不是因为它找不到绑定？

当我把它放在代码的第二部分时，我得到一个无法读取的属性＆＃34;删除＆＃34;未定义的错误。

任何帮助都会很棒！先谢谢

Answer 1

从 TodoItem 组件中删除 removeTodo 功能，并将其放入 App 组件中。将此函数作为prop传递给 TodoItem 组件，并在单击交叉按钮时调用此函数。请记住，移动后，将 removeTodo 功能绑定到App组件。

从列表

1 个答案: