Question

我开始学习React，并尝试列出待办事项清单。我坚持编辑列表中的项目。这就是我的看法。要编辑单个项目，我单击“编辑”按钮，输入出现在项目的位置，我通过单击“输入”按钮提交更改。我的问题是

我的“提交”按钮功能不起作用（代码中的handleEditingDone-
当我点击“编辑”按钮TypeError出现

无法读取未定义的属性“任务”

（在代码中进行handleEditing）

App.js

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            todos: [
                // task: '',
                // id: '',
                //completed: false,
                // all of our to-dos
            ],
            todo: '',
            // an empty string to hold an individual to-do
            filtertodos: []
        }
    }



    inputChangeHandler = event => {
        this.setState({[event.target.name]: event.target.value})
    }

    addTask = event => {
        event.preventDefault();
        let newTask = {
            task: this.state.todo,
            id: Date.now(),
            completed: false,
            editing: false
        };
        this.setState({
            todos: [...this.state.todos, newTask],
            todo: ''
        })
    }

handleEditing = (id) => {
        const todos = this.state.todos.map(todo => {
            if (todo.id === id) {
                todo.editing = !todo.editing
            }
            return todo
        });
        this.setState({
            todos : todos,
            todo: {
                changedText: this.todo.task,
            }
        })

    }
    handleEditingDone = event => {
        if (event.keyCode === 13) {
            this.setState(prevState => ({
                todo: {                   // object that we want to update
                    editing: false,       // update the value of specific key
                }
            }));
        }
    }
    handleEditingChange = event => {
        let _changedText = event.target.value;
        this.setState({
            todo: {changedText: _changedText}
        });
    }

    componentDidMount() {
        this.setState({
            todo: {changedText: this.todo.task}
        })
    }

Todo.js

const Todo = props => {
        return (
            <div style={{display: "flex"}}>
                {props.todo.editing ? (
                    <input onKeyDown={event => props.handleEditingDone} onChange={event => props.handleEditingChange}
                            type="text" value={props.changedText}/> )
                    :
                    (<p key={props.todo.id}
                       onClick={event => {
                           props.toggleComplete(props.todo.id)
                       }} >{props.todo.changedText}{props.todo.completed && ' Completed'}</p>)
                }
                <button onClick={event => props.handleEditing(props.todo.id)}>EDIT</button>
                <button onClick={event => {
                    props.onDelete(props.todo.id)
                }}>x
                </button>
            </div>
        )
    }

Answer 1

问题如下：

this.todo.task

没有this.todo。试试

this.state.todo

React-如何修复待办事项列表中的编辑功能和提交按钮？

1 个答案: