Я создаю программу для списка задач, использующую реагирование и избыточность, и я написал функцию для удаления элементов из списка, когда вы нажимаете на них и добавляете их во второй список, но вычеркнули. Я пытаюсь заставить функцию вызывать onClick для каждого элемента списка, но по какой-то причине, когда я добавляю в него событие, когда я нажимаю кнопку отправки, чтобы добавить новую задачу, все на странице исчезает.
Я уже пробовал другие события, например onMouseDown, и все они вызывали одно и то же. Я пытался изменить различные части кода, но единственное, что его нарушает, - это добавление события onClick.
Функция обработки удаления списка находится здесь
const taskReducer = (state = [[],[]], action) => {
switch(action.type) {
case ADD:
return [state[0].concat(action.task), [...state[1]]];
case COMP:
let idx = indexOf(state[0].filter(action.task));
let beg = state.slice(0, idx);
let end = state.slice(idx + 1);
let newState = [[...beg, ...end], [...state[1], action.task]];
return newState;
default:
return state;
}
}
и часть, которая генерирует кнопку и два списка, здесь
<button
id = 'submitGoal'
onClick = {this.submitHandler} >Submit</button>
<ul id = 'currentTasks'>
{this.props.tasks.map( (task, idx) => {
return (
<li onClick = {this.completeHandler(event.target)} key={idx}>{task}</li>
)
})
}
</ul>
<ul id = 'completedTasks'>
{this.props.compTasks.map( (task, idx) => {
return (
<li key={idx}>{task}</li>
)
})
}
</ul>
Вся программа также в прямом эфире прямо сейчас на https://jeengland.github.io/molehills/
Заранее спасибо за любую помощь!