Как объединить или удалить буквы текущего значения в поле ввода (редукция редактирования элемента todo)

Question

В настоящее время я пытаюсь добавить функцию редактирования в мое приложение todo, и проблема, с которой я столкнулся сейчас, заключается в том, что оно получает текущее значение, но невозможно удалить или добавить буквы. Проверьте первое поле ввода во фрагменте, где я говорю в этом случае.

Для того, чтобы на всю картинку я включил ссылку на этот код и ящик. (компоненты / TodoList. js)

Ссылка на коды и поля

import React from 'react';
import { connect } from 'react-redux';
import { 
    toggleTodo, 
    editTodo,
    updateEdit,
    getEditText
} from '../actions/index';

const TodoList = ({ 
    todoArray, 
    toggleTodo, 
    editTodo,
    updateEdit,
    getEditText
}) => {
    console.log(todoArray);
    let todos = todoArray.map((item, i) => {
        return (
            item.edit ?
            <div key={i}>
            
            
            
            // I am talking about this input field.....
            <input value={item.todoText} onChange={(e) => getEditText(e.target.value, item.id)}/>
            <button onClick={() => updateEdit(item.id)}>Save</button>
            Edit
            </div>
            :
            <div key={i}>
                <div className="todo-text">
                    {item.todoText}
                </div>
              
                <input type="checkbox" checked={item.complete} onChange={() => toggleTodo(item.id)} />
                <button onClick={() => editTodo(item.id)}>Edit</button>
            </div>
        )
    })
  
    return (
        <div>
           {todos}
        </div>
    )
}

const mapDispatchToProps = dispatch => ({
    toggleTodo: id => dispatch(toggleTodo(id)),
    editTodo: id => dispatch(editTodo(id)),
    updateEdit: id => dispatch(updateEdit(id)),
    getEditText: text => dispatch(getEditText(text))
});

const mapStateToProps = state => ({
    todoArray: state.todo
})

export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

Answer 1

Крошечная ошибка, getEditText должен получить два параметра

 getEditText: (text) => dispatch(getEditText(text))

Ваше действие

export const getEditText = (editText, todoId ) => ({
    type: types.GET_EDIT_TEXT,
    editText,
    id: todoId
})

изменить, как показано ниже

const mapDispatchToProps = dispatch => ({
    toggleTodo: id => dispatch(toggleTodo(id)),
    editTodo: id => dispatch(editTodo(id)),
    updateEdit: id => dispatch(updateEdit(id)),
    getEditText: (text,id) => dispatch(getEditText(text,id))//here
});

Answer 2

Я думаю, что проблема в mapDispatchToProps():

const mapDispatchToProps = dispatch => ({
  toggleTodo: id => dispatch(toggleTodo(id)),
  editTodo: id => dispatch(editTodo(id)),
  updateEdit: id => dispatch(updateEdit(id)),
  getEditText: (editText, todoId) => dispatch(getEditText(editText, todoId)) // edited
});

Дополнительная информация: Для локальных состояний, особенно для состояний формы, нормально иметь локальное состояние. Попробуйте использовать Formik https://jaredpalmer.com/formik/docs/overview для управления состоянием формы.