输入字段不显示onClick

Question

我是React的新手，一开始我尝试编写ToDo MVC的代码，一切运行都很好，但是现在我被困在编辑添加的Todo上。因此，我要做的第一步是单击按钮时，输入字段显示为文本，这已经是我目前所能提供的帮助了吗？

import React from "react";
import TodoForm from "./TodoForm";
import Todo from "./Todo";

export default class TodoList extends React.Component {
    state = {
        todos: []
    };



    addTodo = (todo) => {
            this.setState({
            todos: [todo,...this.state.todos] /*pridavanie todo do kopie todos*/
        });
    };

    toggleComplete = (id) => {
        this.setState({
            todos: this.state.todos.map(todo => {
                if (todo.id === id){
                    return {
                        ...todo,
                        complete: !todo.complete
                    };
                } else {
                    return todo;
                }
            })

        });
    };

    handleDeleteTodo = id => {
        this.setState({
            todos: this.state.todos.filter(todo => todo.id !== id)
        });
    }

    deleteAllComplete = () => {
        this.setState({
            todos: this.state.todos.filter(todo => !todo.complete)
        });
    }

    handleEditTodo = () => {
        this.setState({
            todos: this.state.todos
        });
    }

    editTodo = (todo) => {
        this.setState = {
            visible: false
        }
        return <input type="text"
                value={todo.text} />
    }

    visibleTodo = (editTodo) => {
        this.setState({
            visible: !this.state.visible
        })
    }


    render() {
        return <div> 
            <TodoForm onSubmit={this.addTodo} />
            {this.state.todos.map(todo => (<Todo 
                key={todo.id}
                onDelete= {() => this.handleDeleteTodo(todo.id)} 
                toggleComplete={() => this.toggleComplete(todo.id)} 
                todo={todo} 
                />
            ))}

            <div>ToDos left: {this.state.todos.filter(todo => !todo.complete).length}</div>
            <div>
                <button onClick={this.deleteAllComplete}>Delete all checked</button>
            </div>
        </div>
    }
}

Todo功能

import React from "react";

export default (props) => (

    <div style={{
        display: "flex",
        justifyContent: "center"
    }}>
        <div style={{
            textDecoration: props.todo.complete ? "line-through" : ""
        }} 
        >
            {props.todo.text}
            <input onClick={props.toggleComplete}
                type="checkbox"
            />

        </div>
        <button onClick={props.onDelete}>X</button>
        <button onClick={props.visibleTodo}>E</button>
    </div>

);
````