Состояние api хука React иногда пусто

Question

Я использую API-интерфейс для управления состоянием, проблема в том, что состояние иногда бывает пустым в функции обработчика.

Я использую компонент для управления contenteditable(используя из npm) lib. Вы можете писать в компонент, и при входе вы можете отправить событие родителю.

См. Мой пример:

import React, { useState } from "react"
import css from './text-area.scss'
import ContentEditable from 'react-contenteditable'
import { safeSanitaze } from './text-area-utils'

type Props = {
    onSubmit: (value: string) => void,
}

const TextArea = ({ onSubmit }: Props) => {
    const [isFocused, setFocused] = useState(false);
    const [value, setValue] = useState('')

    const handleChange = (event: React.FormEvent<HTMLDivElement>) => {
        const newValue = event?.currentTarget?.textContent || '';
        setValue(safeSanitaze(newValue))
    }

    const handleKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {
        // enter
        const code = event.which || event.keyCode
        if (code === 13) {
            console.log(value) // THERE IS A PROBLEM, VALUE IS SOMETIMES EMPTY, BUT I AM SURE THAT TEXT IS THERE!!!
            onSubmit(safeSanitaze(event.currentTarget.innerHTML))
            setValue('')
        }
    }

    const showPlaceHolder = !isFocused && value.length === 0

    const cls = [css.textArea]
    if (!isFocused) cls.push(css.notFocused)

    console.log(value) // value is not empty

    return (
        <ContentEditable
            html={showPlaceHolder ? 'Join the discussion…' : value}
            onChange={handleChange}
            className={cls.join(' ')}
            onClick={() => setFocused(true)}
            onBlur={() => setFocused(false)}
            onKeyPress={handleKeyPress}
        />
    )
}

export default React.memo(TextArea)

Основная проблема в том, что внутри handleKeyPress (после нажатия клавиши ввода) value(из состояния) пустая строка, почему? - в блокеconsole.log(value) // THERE IS A PROBLEM, VALUE IS SOMETIMES EMPTY, BUT I AM SURE THAT TEXT IS THERE!!! Я не понимаю что не так??

Answer 1

Значение пусто, потому что onChange фактически не меняет его, что означает

const newValue = event?.currentTarget?.textContent || '';

эта строка не выполняет то, что должна. Я думаю, тебе следует прочитатьtarget prop в синтетических событиях реакции вместо currentTarget. Итак, попробуйте это вместо

const newValue = event.target?.value || '';

Надеюсь это поможет.