Не понимаю в чём дело, ошибка ts(2322)
{props.tasks.map((t) => {
const onChangeTitle = (value: string) => {
props.onChangeTitle(t.id, value, props.id);
};
return (
<li key={t.id} className={t.isDone === true ? "is-done" : ""}>
<input
type="checkbox"
onChange={(e) =>
props.changeCheckbox(t.id, e.currentTarget.checked, props.id)
}
checked={t.isDone}
/>
<EditableSpan title={t.title} onChange={onChangeTitle} />
<button onClick={() => props.removeItem(t.id, props.id)}>
x
</button>
</li>
);
})}
в onChange в EditableSpan вылазит ошибка: Type '{ title: string; onChange: (value: string) => void; }' is not assignable to type 'IntrinsicAttributes & EditableSpanPropsType'. Property 'onChange' does not exist on type 'IntrinsicAttributes & EditableSpanPropsType'.
А вот и сам EditableSpan:
type EditableSpanPropsType = {
title: string;
onChangeTitle: (value: string) => void;
};
function EditableSpan(props: EditableSpanPropsType) {
const [editmode, setEditMode] = useState(false);
const [title, setTitle] = useState(props.title);
const activateEditMode = () => {
setEditMode(true);
setTitle(props.title);
};
const activateViewMode = () => {
setEditMode(false);
props.onChangeTitle(title);
};
const onChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {
setTitle(e.currentTarget.value);
};
return editmode ? (
<input
type="text"
value={title}
onChange={onChangeHandler}
onBlur={activateViewMode}
autoFocus
/>
) : (
<span onDoubleClick={activateEditMode}>{props.title}</span>
);
}
Ответы (1 шт):
Автор решения: Randall
→ Ссылка
В компонент EditableSpan вы передаете атрибут onChange вместо onChangeTitle.
Тут есть два решения.
Тип EditableSpanPropsType нужно поменять.
type EditableSpanPropsType = {
title: string;
onChangeTitle: (value: string) => void;
};
Вот так.
type EditableSpanPropsType = {
title: string;
onChange: (value: string) => void;
};
Второе решение.
Вместо onChange передаете onChangeTitle.
<EditableSpan title={t.title} onChangeTitle={onChangeTitle} />